Angular 响应式表单验证出错

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)

I am putting my code in ts file as well as html file

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 文件 ->

Note -> Button is disabled , after the fields of form will validate button will be enable. I have used Validators.email so , if I write a valid email eg - anurag@gmail.com and fill all the inputs , button never enable But when I remove Validators.email and fill all the inputs button is enable

<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

When you do multiple validation use []

请看-:

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

Angular 响应式表单验证出错

Getting error in Angular Reactive form validation

angular-validation

angular

angular-forms

angular-formbuilder

angular-validator