Как мне запустить onChange перед валидатором с формальной формой? - PullRequest
Новая
       22

Как мне запустить onChange перед валидатором с формальной формой?

0 голосов
/ 03 октября 2018

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

Мне не нужно проверять значение, которое еще не было изменено.

Это мое поле: 

vm.fields = [
  {
    key: 'selectExample',
    type: 'select',
    templateOptions: {
      options: [{name: 'option1', value: 'option1'},
                {name: 'option2', value: 'option2'}],
      onChange: function($viewValue, $modelValue, $scope) {
        console.log('onChange after the validator! WHY?!')
      }
    },
    validators: {
      checkValue: function($viewValue, $modelValue, scope) {
        var value = $viewValue || $modelValue;

        if(value) {
          console.log('validated first!');
          return true;
        }
      }
    }
  }
];

Что я могу сделать «дружественным по отношению к угловым» способом, чтобы запустить onChange до запуска валидатора?

Вот быстрый толчок 

angular.module('app',['formly', 'formlyBootstrap'])

.controller('mainCtrl',function(formlyVersion){
  var vm = this;
  vm.env = {
     angularVersion: angular.version.full,
     formlyVersion: formlyVersion
  };
    
  vm.fields = [
      {
        className: 'width',
        key: 'selectExample',
        type: 'select',
        templateOptions: {
          label: 'Options',
          options: [{name: 'option1', value: 'option1'},
                    {name: 'option2', value: 'option2'}],
          onChange: function($viewValue, $modelValue, $scope) {
            console.log('onChange after the validator! WHY?!')
          }
        },
        validators: {
          checkValue: function($viewValue, $modelValue, scope) {
            var value = $viewValue || $modelValue;
            
            if(value) {
              console.log('validated first!');
              return true;
            }
          }
        }
      }
    ];
})
.width {
  width: 200px;
}
<html ng-app="app">
 <body>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
    <script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>

  <div ng-controller="mainCtrl as vm">
    <formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form">
  </div>
  
</body>
</html>
...