验证器如何使用 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。如果添加两行，效果相同。第一个状态为 false，第二个为 true。

为什么会这样？你能解释一下 onPush 策略时的验证行为吗？

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

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>

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

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