驗證器如何使用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策略時的驗證行為嗎？

PS如果我更改模板並刪除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