Как валидаторы работают со стратегией обнаружения изменений «onPush» в Dart Angular? - PullRequest
Новая
       29

Как валидаторы работают со стратегией обнаружения изменений «onPush» в Dart Angular?

0 голосов
/ 10 апреля 2019

Мой компонент формы имеет стратегию обнаружения изменений 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?

PS Если я изменю шаблон и удалю ngControl="linkExtId_{{externalLink.id}}", он будет работать, как и ожидалось.В новой строке я вижу «Действительный статус ложный».

1 Ответ

0 голосов
/ 10 апреля 2019

когда вы используете переменную шаблона, она должна быть уникальной для каждого элемента. в вашем коде: 

   <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

...