Как установить конкретное поле в форме для грязного в angularjs 1.3

Я хочу установить поле определенной формы как грязное, так как я вручную изменяю это значение. Я уже переместил поток SO в Angular.js, программно установив поле формы в грязный, но не повезло.

Вот образец реплики моей проблемы. шлепнуть

<html ng-app="sampleApp">

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0- rc.4/angular.min.js"></script>
 <style type="text/css">
 input.ng-invalid {
  border: 1px solid red;
 }
input.ng-valid {
  border: 1px solid green;
}
input.ng-pristine {
  border-color: #FFFF00;
}
</style>
<script type="text/javascript">
 var sampleApp = angular.module("sampleApp", []);
 sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout',
   function($scope, $http, $timeout) {
     $scope.userData = {
       username: "",
     };

     $timeout(function() {
       $scope.userData.username = '$#deepak';
     }, 5000);

   }
 ]);
 sampleApp.directive('myUsername', [
   function() {
     // Runs during compile
     return {

       require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent 
       link: function($scope, iElm, iAttrs, controller) {

         controller.$parsers.unshift(function(value) {
           //allow only alphanumeric characters
           var reg = /^\w+$/;
           var isValidUsername = reg.test(value);
           controller.$setValidity('username', isValidUsername);

           return isValidUsername ? value : undefined;
         });

         controller.$formatters.unshift(function(value) {
           var reg = /^\w+$/;
           var isValidUsername = reg.test(value);

           controller.$setValidity('username', isValidUsername);
          $scop  e.registrationForm.username.$setViewValue($scope.registrationForm.username.$viewValue);
           return value;
         })

       }
     };
   }
 ]);
  </script>
  </head>

 <body ng-controller="sampleCtrl">
  <div ng-show="bShowStatus">
   {{message}}
   <ul ng-repeat="err in errors">
     {{err}}
   </ul>
  </div>
  <form name="registrationForm" ng-submit="submitForm()" novalidate>
    UserName
    <br>
    <input type="text" name="username" ng-model="userData.username" ng-model-options="{updateOn:  'blur'}" my-username>&nbsp;&nbsp;
    <span ng-show="registrationForm.username.$dirty && registrationForm.username.$error.username">
            Invalid Username.
        </span>

 <br>
 <br>
 <input type="submit" value="Submit">
 </form>
</body>

</html>

В примере я изменяю имя пользователя через 5 секунд (только для примера). В то же время я хочу установить поле как грязное, запустить проверку и показать сообщение об ошибке.

Пожалуйста помоги.

Источник

2 ответа

Дипак

Вот plnkr с решением http://plnkr.co/edit/69Beli?p=preview. Вместо непосредственного обновления $scope.userData.username и обхода конвейера синтаксического анализа "модель для просмотра", используйте jQuery для обновления поля ввода и запуска события "изменение" и используйте конвейер "представление для моделирования", предоставляемый Angular.

            $timeout(function(){
              jQuery("[name=username]").val('$#deepak');
              jQuery("[name=username]").trigger('change');
            }, 5000);

Другой plnkr http://plnkr.co/edit/Zct92r с реализованным $ render. Это для конвейера "модель для просмотра", $render вызывается после $ parser и устанавливает стили на основе ошибок.

    controller.$render = function() {
      console.log('in render');
      iAttrs.$set('value', controller.$viewValue);
      if (controller.$invalid && controller.$viewValue.length !== 0) {
        iElm.css("border", "1px solid red");
      } else if (controller.$viewValue.length === 0) {
        iElm.css("border", "1px solid gold");
      } else {
        iElm.css("border", "1px solid green");
      }
    };

Оба решения выглядят как хак, а $ render - больше. Все, что установлено в $ render, должно быть компенсировано в $ parser и отменено.

Источник

Ну, это работает для меня, используя флаг $dirty, обсуждаемый в потоке ( Angular.js программно устанавливает поле формы в dirty):

$timeout(function(){
    $scope.userData.username = '$#deepak';
    $scope.registrationForm.username.$dirty = true;
}, 5000);

Смотрите рабочий плункер здесь: http://plnkr.co/edit/ZvX62jJsklPLyw7Q4nlT?p=preview

Источник
Другие вопросы по тегам