Javascript AngularJS：如何设置一个输入值和另一个输入值，并像用户输入一样进行验证？

我使用的是angular 1.3.0rc2，我试图让一个输入字段，在模糊上，设置另一个输入字段，就好像它是用户输入的一样

如果在我试图设置的输入上只存在一个同步验证器，而没有解盎司验证器或异步验证器，那么当我执行以下操作时，事情似乎总是按照预期工作：

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

然而，当我试图设置的输入上存在异步验证器或反Bounce时，并且当我试图设置的输入处于当前无效状态时，事情似乎并不像预期的那样工作

我创建了以下plunkr来展示我的不幸。尝试设置“全名”的值，看看用户名字段会发生什么，我想在全名字段的模糊上设置用户名字段。当Username字段处于无效状态时，更改Full Name的值，然后从字段中删除焦点并不会像我预期的那样更新Username

---

所以，我的问题是，我如何设置一个输入字段和另一个输入字段，使其可靠地工作，并像用户自己输入了这个新输入一样工作（从而通过验证器运行并相应地更新模型值）？

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

HTML

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

---

好的，我们要解决的基本问题是，如果用户将输入设置为无效，则会将基础模型值设置为未定义，而通过编程将输入设置为无效状态则不会

这是不一致的，所以我试图找到一种方法来避免这种情况。事实证明，解决方案并不像人们希望的那样直截了当（见）

然而，提出了相反的解决方案，即在封闭表单上使用

ngModelOptions

（或每个输入，但这更麻烦）并将“allowInvalid”设置为true。这意味着仍将为模型设置无效值，而不是在这种情况下清除模型值

考虑到无论有效性如何，模型总是现在设置，我可以回到一种更简单的方法，通过编程设置一个字段和另一个字段——只需设置基础模型值，其行为与用户自己设置值时相同：）

再次在第二个输入上使用异步验证器进行plunkr演示：

---

查看模型如何以相同的方式结束，无论第二个输入值是手动设置的还是从第一个输入设置的，无论有效性和异步验证器的使用情况如何，如需要：）

您好，感谢您发布答案。不幸的是，您的答案没有使用异步验证等，因此无法解决我的问题。我在这里编辑了你的plunker，添加了一个异步验证器，问题再次出现：我很可能认为这是错误的，但我的假设是，你想让用户输入全名，让他们使用全名作为用户名，但在他们这样做之前，发出服务器请求以确保用户名不被使用，是否符合验证标准？尝试一下，看看是否有帮助。当第二个输入变为无效时，尝试在plunkr中单击然后关闭第一个输入几次；）另一个问题是，现在我的nice asyncValidator绑定到以这种特殊方式设置元素值，如果我想在其他地方重用它，这就不太理想了。我的基本意图是让一个字段更新另一个字段，就像用户自己输入值一样。这意味着，如果该字段无效，则从ng model指向的模型值应该是未定义的，就像用户在字段中输入无效输入时一样。这一要求促使我尝试$setViewValue等，而不是在全名字段模糊时更新用户名字段的模型值（如果模型值无效，则不会保留未定义的模型值）。我觉得这应该是可能的：）

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();
        }
      }
    }
  }
}])