Angular * ngIf = "fg.hasError ('email', ['myEmail'])" не работает - PullRequest
Новая
       9

Angular * ngIf = "fg.hasError ('email', ['myEmail'])" не работает

0 голосов
/ 11 января 2019

Я тестирую некоторую проверку группы реактивных форм, которая включает следующий код, в состав component.ts входит: 

fg: FormGroup;
id: string;
obj: MyObj = <MyObj>{};

constructor(
 private fb: FormBuilder,
 private route: ActivatedRoute,
 private store: Store<AppState>
) { }

ngOnInit() {

 this.id = this.route.snapshot.paramMap.get('id');
 if (this.id) { //edit
  this.store.select(selectById(this.id))
   .subscribe((obj: MyObj) => {
     this.obj = obj;
   })
 }

 this.fg = this.fb.group({
  myEmail: [
   this.obj.email,
   [Validators.email]
  ]
 });

}

component.html включает в себя: 

<form [formGroup]="fg" (ngSubmit)="onSubmit()">
 <mat-form-field>

  <input matInput 
    type="email"
    placeholder="Email"
    formControlName="myEmail"
  >

  <mat-error *ngIf="fg.hasError('email', ['myEmail'])">
   Enter a valid email address
  </mat-error>

 </mat-form-field>

 Email HasError: {{ fg.hasError('email', ['myEmail']) }}

</form>

Открывается страница, и она проверяет наличие параметра id, если он есть, то редактирует, не добавляя, поэтому находит объект obj, подписавшись на хранилище ngrx и получив объект obj и установив член obj компонента.

Определение группы реактивных форм определено так, что myCmail formcontrol получает свое значение из this.obj.email.

Затем появляется элемент mat-error, который отображается только в том случае, если элемент управления myEmail недействителен из средства проверки электронной почты.

Теперь проблема в том, что при загрузке формы, если значение адреса электронной почты в хранилище недопустимо, ошибка остается скрытой, пока вы не коснетесь и не покинете поле электронной почты. Тогда ошибка отображается.

Хотя store.select (...). Subcribe () является асинхронным действием, почему значение элемента управления электронной почтой корректно обновляется и {{...}} отображается правильно при загрузке. например 'Email HasError: true'.

Как заставить * ngIf переоценивать fg.hasError, когда он меняется на true? Значит ошибка отображается при загрузке страницы?

Я попытался создать объект BehaviourSubject на компоненте и вызвать следующий шаг в store.subscribe (). Затем, имея это в * ngIf с асинхронным каналом. Но это тоже не работает.

...