Инициализация шаблонной формы в Angular 7

Question

Я хочу инициализировать определенные поля формы в форме, а затем вызвать функцию с условием if(this.form.valid).

для функции ngOnInit У меня есть вызов API, который получает некоторыеОсновная информация и заполняет ее в форме:

ngOnInit(){
    this.apiService.getInfo(this.user.id).subscribe(
        userInfo => {
            this.formModel.fieldA = userInfo.A; 
            this.formModel.fieldB = userInfo.B; 
            this.formModel.fieldC = userInfo.C; 
            this.doStuff();
        }
    );
}

Однако при вызове this.doStuff() форма недействительна, даже если нет никаких ошибок, и нажатие на кнопку отправки, кажется, вызывает проверку и вызывает еебыть действительным.

Есть ли способ вручную запустить проверку формы, чтобы valid стал истинным?

Редактировать: Stackblitz .

Answer 1

Угловые формы на основе шаблонов фактически асинхронны.Это особенно заметно при работе с директивой NgForm в компоненте по сравнению с реактивными формами.Если бы вы поместили debugger в вашу calc() функцию из stackblitz :

Вы бы увидели это в функции calc при вызове изOnInit показывает, что форма недействительна, и элементы управления формой не имеют никакого значения:

Таким образом, ваш if в calc():

if (this.formExample && this.formExample.valid)

не является truthy и result не будет вычисляться, так как форма не является valid.

Так что если мы подождем галочку перед вызовом calc(), тодолжен решить вашу проблему:

this.getInfo().subscribe(
  info => {
    this.params.field1 = info.field1;
    this.params.field2 = info.field2;
    // wait a tick!
    setTimeout(() => {
      this.calc();
    })
  }
);

STACKBLITZ