如何在带有形式验证器之前运行onChange?

时间:2018-10-03 08:23:22

标签: html angularjs angular-formly

我正在使用正式形式的验证器,但是我不想验证预先更改的值。我想验证刚刚选择的值...

我不需要验证尚未更改的值。

这是我的领域:

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>

0 个答案:

没有答案