Просмотр не обновляется при изменении данных формы - PullRequest
Новая
       0

Просмотр не обновляется при изменении данных формы

0 голосов
/ 20 февраля 2020

У меня есть демонстрация StackBlitz, которая показывает проблему: https://stackblitz.com/edit/demo-nested-forms

Если вы подождите 2 секунды, форма заполняется наблюдаемой, и вы можете увидеть данные формы как JSON под цветными блоками. Если вы измените текст в любом из входов и щелкнете по ним, вы увидите, что данные формы обновляются.

Если вы затем нажмете кнопку «Получить новые данные формы», она вызовет ту же самую наблюдаемую для возврата исходный объект снова. На этот раз, хотя данные формы корректно «сбрасываются», представление не обновляется.

Есть идеи, почему представление теперь не синхронизировано c?

1 Ответ

1 голос
/ 20 февраля 2020

Вы не применяете formControlName к самому элементу управления, вы устанавливаете значение текстовой области с помощью атрибута [value]. Таким образом, он обновляется в первый раз, но затем никогда не получает обновления через форму.

Исправление состоит в том, чтобы передать имя элемента управления формы дочернему элементу и применить его к элементу управления. Если вы делаете это, вам также необходимо применить директиву [formGroup] в том же компоненте, что и имя элемента управления формы, так что вам нужно будет передать это тоже.

Оригинальная версия

child. html

<div>
  <textarea [value]="value">
  </textarea>
</div>

parent. html

<div [formGroup]="form">
  <child formControlName="details" [value]="value">
  </child>
</div>

Обновленная версия

child. html

<div [formGroup]"myFormGroup">
  <textarea [formControlName]="myFormControlName">
  </textarea>
</div>

child.ts 

@Input() myFormControlName: string;
@Input() myFormGroup: FormGroup;

parent. html

<div>
  <child [myFormGroup]="form" myFormControlName="details">
  </child>
</div>

Я использовал неоднозначные имена входных свойств из директивы формы имен. Очевидно, вы захотите использовать чуть более разумные имена.

Разбитый стек стека: https://stackblitz.com/edit/demo-nested-forms-wplzbq

Я сломал обработку изменений в процессе разветвления вашего стекаблица. Но самое главное, что значения обновляются.

...