Инициализация с использованием patchValue для шаблонно-управляемых форм

Question

Я использую шаблонный привод и пытаюсь инициализировать свою форму с помощью patchValue, и она не работает.

Я могу заставить ее работать, если использую двустороннее связывание для установки значений [(fooBar)] или даже setTimeout, но мне было просто интересно, есть ли способ заставить его работать только с patchValue?

https://stackblitz.com/edit/angular-fft2c5

Спасибо.

Answer 1

Не работает, потому что во время вызова метода patchValue в вашей форме еще нет элементов управления .

Почему?

Это потому, что формы на основе шаблонов асинхронны . Они делегируют создание своих элементов управления формам директивам. Чтобы избежать ошибок «изменено после проверки», эти директивы занимают более одного цикла для построения всего дерева управления. Это означает, что вы должны подождать галочку, прежде чем манипулировать любым из элементов управления из класса компонента .

Более того, если вы попытаетесь использовать метод setValue вместо patchValue Angular, даже предупреждает вас, как с этим справиться.

this.myForm.control.setValue({name: this.name});

Ошибка: ошибка. В этой группе еще не зарегистрировано ни одного элемента управления формой. Если вы используете ngModel, вы можете проверить следующий тик (например, использовать setTimeout).

Итак, как вы уже обнаружили, вы должны либо использовать привязку [ngModel], либо ждать следующего тика например, setTimeout или requestAnimationFrame

Планирование микрозадачи также должно работать, если вы будете использовать ее в хуке ngAfterViewInit:

ngAfterViewInit() {
  Promise.resolve().then(() => {
    this.myForm.control.patchValue({ name: this.name });
  });
}

Answer 2

В шаблонно-управляемых формах вам необходимо привязать [(ngModel] для установки значений.

Попробуйте так:

. html

<input name="name" [(ngModel)]="formValue.name"/>

.ts

formValue:any = {}

ngOnInit() {
  this.formValue = {name: this.name}
}

Рабочая демоверсия