3

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

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

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

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

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

http://plnkr.co/edit/h1hvf79W8ovqAlNLpBvS

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

4

2 回答 2

0

好的，所以我们在这里要解决的基本问题是，让用户设置一个无效的输入会导致基础模型值设置为未定义，而以编程方式将输入设置为无效状态则不会。

这是不一致的，所以我试图找到一种方法来规避它。事实证明，解决方案并不像希望的那么简单（参见https://github.com/angular/angular.js/issues/9295）

但是，提出了相反的解决方案，其中涉及ngModelOptions在封闭表单（或每个输入，但更麻烦）上使用“allowInvalid”设置为true。这意味着仍然会为模型设置无效值，而不是在这种情况下清除模型值。

鉴于无论有效性如何，现在总是设置模型，我可以恢复到以编程方式设置一个字段的更简单方法 - 只需设置基础模型值，它的行为与用户自己设置值的行为相同:)

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

http://plnkr.co/edit/lkDN4qLbbkN79EmRrxsY?p=preview

无论第二个输入值是手动设置还是从第一个输入设置，无论有效性和异步验证器的起诉如何，看看模型如何结束：)

于 2014-09-26T23:07:09.777 回答
0

试试这个，当你模糊全名时它应该调整用户名。

Plunkr

模型

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();
        }
      }
    }
  }
}])
于 2014-09-25T14:09:31.940 回答