javascript - AngularJS:如何从另一个设置一个输入值，并让它像用户输入一样通过验证？

Question

我正在使用 angular 1.3.0rc2，并且我正在尝试让一个输入字段在模糊时设置另一个输入字段，就好像它是用户输入的一样。

如果我尝试设置的输入上只存在一个同步验证器，并且没有去抖动或异步验证器，那么当我执行类似以下操作时，事情似乎总是按预期工作:

myForm.username.$setViewValue('some value');
myForm.username.$render();

但是，当我尝试设置的输入上存在异步验证器或反跳，并且我尝试设置的输入处于当前无效状态时，事情似乎没有按预期工作。

我创建了以下 plunkr 来展示我的困境。尝试设置“全名”的值，看看 用户名 字段会发生什么，我也想将其设置为 模糊 全名 字段。当 Username 字段处于无效状态时，更改 Full Name 的值然后从字段中移除焦点不会更新 Username，因为我会期待。

http://plnkr.co/edit/h1hvf79W8ovqAlNLpBvS

所以，我的问题是，我如何设置一个输入字段，使其能够可靠地工作，并且就像用户自己输入了这个新输入一样(从而运行验证器并相应地更新模型值) )?

Answer 1

试一试，当您模糊全名时，它应该会调整用户名。

Plunkr

ngModel

HTML

Full Name:
<input name="fullName" ng-model="fullName" test-validator change-field="username" />
User Name:
<input name="username" ng-model="username" required />

JS

angular.module("testApp",[]).controller("testCtrl", function($scope) {  


}).directive('testValidator', ['$sce', function ($sce) {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function (scope, element, attrs, ngModel) {
      if(!ngModel) return;

      element.on('blur', function () {
        scope.$apply(read);
      });

      function read() {
        if(attrs.changeField) {
          var field = attrs.changeField;
          scope.myForm[field].$setViewValue(element.val());
          scope.myForm[field].$render();
        }
      }
    }
  }
}])