ngRequired и пользовательская директива в угловом

Question

Я не могу получить директиву smart float, найденную в примере угловых документов, работающем при использовании вместе с ngRequired.

Вы можете подтвердить это, перейдя на угловой странице DOCS https://docs.angularjs.org/guide/forms

Отредактируйте plunker на смарт-пример поплавка, и добавить нг-требуется = «ложь». Убедитесь, что действительность всей формы, а не отдельного элемента управления.

Сама форма всегда помечена как недействительная, если на элементе управления нет ввода.

Я использую версию 1.3.0-RC3

Answer 1

Для того, чтобы разрешить пустые значения для smartFloat директивы вы должны использовать $validators для проверки достоверности значения поплавка в сочетании с $parsers. Также обратите внимание, что возвращение undefined (или не возвращающее какое-либо значение) из любого из парсеров отметит, что вся форма недействительна.

Разрешить пустые значения

var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/; 
app.directive('smartFloat', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elm, attrs, ctrl) { 
     // Parse 
     ctrl.$parsers.unshift(function (viewValue) { 
     if (!viewValue) { 
      return ''; // <-- Don't return undefined, but empty string instead 
     } else if (FLOAT_REGEXP.test(viewValue)) { 
      return parseFloat(viewValue.replace(',', '.')); 
     } 
     }); 
     // Validate 
     ctrl.$validators.float = function (viewValue) { 
      if (viewValue === '') { 
      ctrl.$setValidity('float', true); // <-- Handle empty value as valid 
      return true; 
      } else if (FLOAT_REGEXP.test(viewValue)) { 
      ctrl.$setValidity('float', true); 
      return true; 
      } else { 
      ctrl.$setValidity('float', false); 
      return false; 
      } 
     }; 
    } 
    }; 
}); 

Живой пример см here.