这是 *ngIf 的错误还是我遗漏了什么？

Question

我正在进行反应式表单验证，我发现此 *ngIf 在检查有效电子邮件模式时存在错误。当我们写一封无效的电子邮件并在输入 *ngIf 之外单击时，即使输入有效，模式检查也将始终 return 。请查看演示视频。

Here's the Video of the bug please check

.html

<form name="form" [formGroup]="form">
    <div class="form-group" [ngClass]="{'has-danger': form.get('email').touched && form.get('email').invalid, 'has-success': form.get('email').valid}">
        <label for="email">Email Address</label>
        <input type="email" class="form-control" name="email" formControlName="email" id="email" placeholder="Email Address">
        <div *ngIf="form.get('email').touched && form.get('email').errors.required" class="form-control-feedback">This field is required!</div>
        <div *ngIf="form.get('email').errors?.pattern" class="form-control-feedback">Email is Invalid!</div>
    </div>
</form>

.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-career-page',
  templateUrl: './career-page.component.html',
  styleUrls: ['./career-page.component.css']
})
export class CareerPageComponent implements OnInit {
  constructor() { }
  form = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')]),
  })
  ngOnInit(): void {
    
  }

}

Answer 1

我认为这种情况的发生是因为 div 消息没有嵌套。一旦用户在外面点击，form.get('email').errors就会变成null，所以就会出现上面的场景..

第一个 div 上的 *ngIf 应该有一个条件，只有在触摸或类似的情况下，它才应该显示嵌套的 div 消息，如 'field is required'或 'Enter valid email'...

请尝试使用此代码进行验证：

<form name="form" [formGroup]="form">
<div class="form-group" [ngClass]="{'has-danger': form.get('email').touched && form.get('email').invalid, 'has-success': form.get('email').valid}">
    <label for="email">Email Address</label>
    <input type="email" class="form-control" name="email" formControlName="email" id="email" placeholder="Email Address">
    <div *ngIf="form.get('email').invalid && (form.get('email').dirty || form.get('email').touched)">
      <div *ngIf="form.get('email').errors.required" class="form-control-feedback">This field is required!</div>
      <div *ngIf="form.get('email').errors?.pattern" class="form-control-feedback">Email is Invalid!</div>
    </div>
</div></form>

这是 *ngIf 的错误还是我遗漏了什么？

Is this a bug of *ngIf or just something that I have missed?

reactive

angular

angular-reactive-forms