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]]进行多次验证。

ng build --configuration=production --base-href /

Answer 2

进行多次验证时，请使用[]

请参阅-：

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

在Angular Reactive表单验证中遇到错误

2 个答案: