Получение ошибки в проверке формы Angular Reactive

Question

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

При каждом последующем вводе в поле ввода электронной почты я получаю сообщение об ошибке -

ReactiveComponent.html:21 ERROR Error: Expected validator to return Promise or Observable.
    at toObservable (forms.js:456)
    at Array.map (<anonymous>)
    at FormControl.asyncValidator (forms.js:444)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runAsyncValidator (forms.js:2313)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2286)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.FormControl.setValue (forms.js:2624)
    at updateControl (forms.js:1558)
    at DefaultValueAccessor.onChange (forms.js:1543)
    at DefaultValueAccessor.push../node_modules/@angular/forms/fesm5/forms.js.DefaultValueAccessor._handleInput (forms.js:601)
    at Object.eval [as handleEvent] (ReactiveComponent.html:21)

Я помещаю свой код в файл ts, а также в файл html

файл ts -

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


@Component({
  selector: 'app-reactive',
  templateUrl: './reactive.component.html',
  styleUrls: ['./reactive.component.css']
})
export class ReactiveComponent implements OnInit {

  signupForm: FormGroup;
  FirstName: string = '';
  LastName: string = '';
  Eamil: string = '';
  Password: string = '';



  constructor(public frmbuilder: FormBuilder) { // formBuilder assign all the formcontrol to formgroup
    this.signupForm = frmbuilder.group({
    fname: ['', Validators.required],  // FormControl  Used to bring input value to the ts file 
    lname: ['', Validators.required],
    Emailid: ['', Validators.required , Validators.email],
    userpassword: ['', Validators.required ]
});


   }

  ngOnInit() {
  }

  PostData(signupForm: any) {
    console.log(signupForm.controls);
    this.FirstName  = signupForm.controls.fname.value;
    this.LastName  = signupForm.controls.lname.value;
    this.Eamil  = signupForm.controls.Emailid.value;
    this.Password  = signupForm.controls.userpassword.value;

  }
}

файл HTML ->

Примечание-> Кнопка отключена, после проверки полей формы кнопка будет включена.Я использовал Validators.email, поэтому, если я напишу действительное электронное письмо, например - anurag@gmail.com и заполню все поля ввода, кнопка никогда не активирует Но когда я удаляю Validators.email и заполняю все поля ввода, кнопкавключить

<form [formGroup]='signupForm' (ngSubmit)="PostData(signupForm)">
    <div class="form-group">
   <input type="text" formControlName='fname'  placeholder="First Name">
  </div>  
   <div class="form-group">
      <input type="text" formControlName='lname' placeholder="last Name">
        </div>  
 <div class="form-group">
      <input type="email" formControlName='Emailid' placeholder="Eamil Id">
      </div>  
 <div class="form-group">
          <input type="password" formControlName='userpassword' placeholder="your pasword">
          </div>  
 <div>
        <input type="submit" value="Post Data" [disabled]='!signupForm.valid'>
      </div>
      </form>   

Answer 1

Когда вы делаете множественную проверку, используйте []

см. -:

Emailid: ['', [Validators.required, Validators.email]]

Answer 2

используйте [] для множественной проверки.

Emailid: ['', [Validators.required, Validators.email]]