Угловая шаблонно-управляемая форма с условной проверкой в ​​файле компонента - значение # form.valid актуально только после вызова setTimeout ()

Question

В угловой форме, управляемой шаблоном, я хочу условно проверить поля ввода, основываясь на том, какая кнопка была нажата.Затем в файле компонента ts я проверяю, является ли форма действительной, т.е. действие может быть выполнено или недействительным, т.е. данные формы должны быть исправлены.Я использую ссылочную переменную шаблона формы, чтобы определить, является ли форма действительной или нет <form #heroForm="ngForm">, затем в файле .ts @ViewChild('heroForm') form:Ngform; Когда нажимается кнопка, я устанавливаю условие, является ли поле обязательным или нет, и затем оцениваю, является ли формадопустимо или нет.

Однако, когда я устанавливаю переменную actionType = 'A' так, чтобы ввод был необходим, а затем сразу после вычисления this.form.valid он говорит мне, что форма действительна, хотя это не так (требуется вводотсутствуют данные)

this.actionType = 'A';//this make the input field required
if(this.form.valid){ // should be false but it is true (although later it changes to false)
 //code that should be executed when form is valid
}

После того, как я отладил приложение, я заметил, что установка переменной с новым значением, а затем проверка выполняется асинхронно, поэтому this.form.valid проверяется до завершения предыдущей операции.

Когда я помещаю код проверки формы в setTimeout, он работает, но я не уверен, что это правильный способ справиться с этим делом.

Есть ли другой способ, который должен или может быть решен?

Я создал образец стекаблица, чтобы проиллюстрировать проблему https://stackblitz.com/edit/angular-g1nb9s

Просмотрите вывод консоли, чтобы увидеть, что происходитing.

Ожидаемое поведение:

• Я нажимаю кнопку actionA
• Поле ввода становится обязательным при установке actionType = 'A'
• значение this.form.valid в файле ts должно быть false (потому что ввод требуется и пуст)

В настоящее время, когда я нажимаю кнопку actionA и сразу читаю this.form.valid в файле компонента, затемзначение true

Answer 1

Изменения actionType не будут немедленно отражены в template.Эти изменения будут видны в шаблоне только после следующей галочки.Вы можете использовать setTimeout следующим образом:

  public onClickA(){
    this.actionType = 'A';
    setTimeout(()=>{this.buttonClicked()},0)
  }

  public onClickB(){
    this.actionType = 'B';
    setTimeout(()=>{this.buttonClicked()},0)
  }

Answer 2

Вы используете атрибут required с синтаксисом привязки атрибута ([required]="actionType === 'A'"), что имеет смысл.

Поскольку Angular требуется некоторое время, чтобы обнаружить эти изменения, вы можете явно указать Angular сделатьтолько то.Это можно сделать, вызвав detectChanges на ChangeDetectorRef, который вам придется импортировать из @angular/core.

. Также существует проблема с типом heroForm, который вы объявили.@ViewChild('heroForm') form: Ngform; необходимо изменить на @ViewChild('heroForm') form: NgForm;, а NgForm нужно import изменить на @angular/forms:

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { NgForm } from '@angular/forms';

...
@ViewChild('heroForm') form: NgForm;
...
constructor(private cdRef: ChangeDetectorRef) {}
...
public onClickA() {
  this.actionType = 'A';
  this.cdRef.detectChanges();
  console.log("Value of actionType->" + this.actionType);
  console.log("Value of form.valid->" + this.form.valid);
}

Вот Обновлен StackBlitz для справки.