Угловая форма $pristine по умолчанию имеет значение false

ссылка на плункер моего варианта использования.

Я использую Eternicode Bootstrap Datepicker в своем приложении. Я создал директиву выбора даты, и она используется в форме Angular.

Директива средства выбора даты:

angular.module('MyApp', [])
      .directive('myDatePicker', function($compile) {
        return {
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, element, attrs, ngModelCtrl) {
            $(element[0]).datepicker({
              autoclose: true,
              format: "dd/mm/yyyy"
            });

            $(element[0]).datepicker().on("change", function(e) {
              scope.$apply(function() {
                ngModelCtrl.$setViewValue(element.val());
              });
            });
          }
        };
      });

Когда форма Angular загружается изначально, ее свойства следующие:

$pristine : false
$dirty : true

Когда я watch form model и печатаю их на консоли, я понял, что модель формы имеет свойство, которое было установлено средством выбора даты, и вот как это выглядит:

введите описание изображения здесь

В той же ссылке на плункер, если я прокомментирую раздел даты в следующей форме, будут его свойства:

$pristine : true
$dirty : false

Вот так сейчас выглядит form model:

введите описание изображения здесь

Как мне защитить мою модель формы от повреждения, которое вызывает проблемы, установив $ pristine на false и $ dirty на true, несмотря на использование директивы Date?

PS: это абстракция более крупного варианта использования, который есть в нашем текущем приложении.

Заранее спасибо.


datepicker angularjs angular-directive bootstrap-datepicker
person BeingSuman    schedule 14.10.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я исследовал ваш код и заметил, что вы должны написать следующий код в функции компиляции директивы.

 $(element[0]).datepicker({
          autoclose: true,
          format: "dd/mm/yyyy"
 });

это решит вашу проблему.

поэтому ваша директива выглядит следующим образом:

    .directive('myDatePicker', function($compile) {
    return {
      restrict: 'A',
      require: 'ngModel',
      compile: function(scope,  element, attrs) {
        $(element[0]).datepicker({
          autoclose: true,
          format: "dd/mm/yyyy"
        });
      },
      link: function(scope, element, attrs, ngModelCtrl) {
        $(element[0]).datepicker().on("change", function(e) {
          scope.$apply(function() {
            ngModelCtrl.$setViewValue(element.val());
          });
        });
      }
    };

Функция компиляции занимается преобразованием шаблона DOM. Поскольку большинство директив не выполняют преобразования шаблона, они используются нечасто.

person Divyesh Rupawala    schedule 14.10.2016
comment
Это сработало как волшебник :) Пора мне прочитать, перечитать эту ссылку SOF - person BeingSuman; 14.10.2016

arrow_upward
0
arrow_downward

Я не совсем понимаю ваш вариант использования, но после выбора даты, почему бы вам просто не сделать программный

$scope.form.$setPristine();

Я считаю, что это было введено в v1.1

person nikjohn    schedule 14.10.2016
comment
я пробовал это, но потерпел неудачу. Где мне это сделать? В контроллере или в директиве? - person BeingSuman; 14.10.2016
comment
Везде, где находится ваша форма. Один из способов убедиться в этом — установить бэтаранг и проверить свои прицелы. Какая бы область ни имела .form, она должна быть там, где вы используете это - person nikjohn; 14.10.2016