验证器如何使用Dart Angular中的变化检测策略“onPush”？

Question

我的表单组件有onPush的变化检测策略。我在ngFor中有一个代码：

<div *ngFor="let externalLink of edited.externalLinks">
  <input #xctrl="ngForm" type="text" class="form-control" id="extId" required [(ngModel)]="externalLink.extId" ngControl="linkExtId_{{externalLink.id}}">

  Valid status is {{xctrl.control.valid}}
</div>

用户通过单击按钮在列表中添加新行。

void addExternalLink() {
  if (edited != null) {
    edited.externalLinks.add(ExternalLink()..id = Uuid().v4().toString());
    _cdr.markForCheck();
  }
}

输入具有“必需”指令。新行出现后“有效状态为真”，但输入为空。如果用户单击输入并退出控件，则验证状态将更改为false。如果添加两行，效果相同。 First的状态为false，第二个为true。

它为什么这样工作？你能解释onPush策略时的验证行为吗？

附：如果我更改模板并删除ngControl="linkExtId_{{externalLink.id}}"然后它按预期工作。在新行上，我看到“有效状态为false”。

Answer 1

使用模板变量时，每个元素必须是唯一的。在你的代码中：

   <div *ngFor="let externalLink of edited.externalLinks">
        <input #xctrl="ngForm" type="text" class="form-control" id="extId" required 
          [(ngModel)]="externalLink.extId" ngControl="linkExtId_{{externalLink.id}}">

        Valid status is {{xctrl.control.valid}}
   </div>

如果你看一下，在定义模板变量之前，你在input元素上循环，所有创建的输入都有相同的模板变量。因此，您无法单独验证每个输入。如果你想这样做，你应该使用动态制作的反应形式。你可以看一下这个文件：

https://angular.io/guide/dynamic-form