Как создать сообщение об ошибке для проверки формы

Question

Попытка сгенерировать сообщение об ошибке для проверки формы, но я не знаю, как сгенерировать сообщение об ошибке. Я хочу создать html-элемент для ошибки типа «Пожалуйста, введите значение динамически под элементом ввода с помощью typescript. Как это сделать?

  ngOnInit() {
  this.ngForm = this._fb.group({
  name: ['', Validators.required],
  email: ['', Validators.required,Validators.pattern(this.emailPattern)]
   });
  }

Answer 1

Существует валидатор электронной почты, который вы можете использовать.

ngOnInit() {
  this.ngForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email:  new FormControl('', [Validators.required,Validators.email])
  });
 }

Тогда в вашем html

<form   [formGroup]="ngForm" (submit)="submitform()">
 <input type="text" class="form-control" name="name" formControlName="name"/>
 <div *ngIf="ngForm.get('name').hasError('required')" style="color:red;">
   Name is required.
 </div>

 <input type="text" class="form-control" name="email" formControlName="email"/>
   <div *ngIf="ngForm.get('email').hasError('required')" style="color:red;">
   Email is required.
 </div>
 <div *ngIf="ngForm.get('email').hasError('email')" style="color:red;">
    Please enter the correct email or valid email.
 </div>

 <button>Submit</button>
</form>