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

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

为什么这样工作？您可以解释onPush策略时的验证行为吗？

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

Answer 1

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

http://127.0.0.1:3000/myapi/{city_name}/{date}/

如果您查看它，则在定义模板变量之前，请在输入元素上循环，并且所有创建的输入都具有相同的模板变量。因此，您无法分别验证每个输入。如果要这样做，则应使用动态生成的反应形式。您可以查看文档：

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

验证程序如何与Dart Angular中的变更检测策略“ onPush”一起使用？

1 个答案: