Question

分享错误和输入屏幕我在Angular2中探索自定义验证。并通过以下文章： http://www.kirjai.com/validation-model-driven-forms-ng2/

当我配置并在电子邮件文本中键入任何值并获得以下异常时：

TypeError：_this.subscribe不是函数在http://localhost:4200/vendor.bundle.js:58877:15 在新的ZoneAwarePromise（http://localhost:4200/vendor.bundle.js:62806:29）在Object.toPromise（http://localhost:4200/vendor.bundle.js:58875:12） at _convertToPromise（http://localhost:4200/vendor.bundle.js:4313:187）在Array.map（本机）在FormControl.asyncValidator（http://localhost:4200/vendor.bundle.js:4306:80）在FormControl.AbstractControl._runAsyncValidator（http://localhost:4200/vendor.bundle.js:16916:41）在FormControl.AbstractControl.updateValueAndValidity（http://localhost:4200/vendor.bundle.js:16890:22）在FormControl.setValue（http://localhost:4200/vendor.bundle.js:17146:14）在DefaultValueAccessor.onChange（http://localhost:4200/vendor.bundle.js:5914:17）

以下是我的组件代码：

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

@Component({
selector: 'form-validation',
  templateUrl :'./app.validationform.html'
    })
    export class FormValidationComponent {
  validateForm : FormGroup;
  email: AbstractControl;

  constructor(private fb: FormBuilder){
      this.validateForm = fb.group({

      'firstName' : [null, Validators.required],

      'email':[null, Validators.required,     Validators.compose([this.checkIfA])]

    })

    this.email = this.validateForm.controls['email'];
  }

    checkIfA(fieldControl: FormControl): { [s: string]: boolean }{
      console.log("filedControlValue",fieldControl.value[0]==='a');
      console.log("fieldControl.value",fieldControl.value[0]);
      console.log("returnValue",fieldControl.value[0] === 'a' ? null : {     notA: true });
     return fieldControl.value[0] === 'a' ? null : {notA: true };
    }

  submitForm(value: any){
    console.log(value);
  }
}

以下是我的HTML COde：

<form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
    <div class="form-group" [ngClass]="{'has-error':!validateForm.controls['firstName'].valid && validateForm.controls['firstName'].touched}">
        <label>First Name:</label>
        <input class="form-control" type="text" placeholder="FirstName" [formControl]="validateForm.controls['firstName']">
        <!-- The hasError method will tell us if a particular error exists -->
        <div *ngIf="validateForm.controls['firstName'].hasError('required') && validateForm.controls['firstName'].touched" class="alert alert-danger">You must include a first name.</div>
    </div>
              <div class="form-group" [ngClass]="{'has-error':!email.valid && email.dirty && email.touched}">
        <label>Email</label>
        <input class="form-control" type="text" placeholder="Email" [formControl]="email">
        <!-- The hasError method will tell us if a particular error exists -->
        <div *ngIf="email.hasError('required') && email.touched" class="alert alert-danger">You must include a email address.</div>
        <div *ngIf="email.hasError('notA') && email.touched" class="alert alert-danger">First letter of the email needs to be an a.</div>
    </div> 
    <div class="form-group">
        <button type="submit" class="btn btn-primary" [disabled]="!validateForm.valid">Submit</button>
    </div>
</form>

Answer 1

如果有多个验证器，则必须声明和数组

'email'：[null，Validators.required，Validators.compose（[this.checkIfA]）]

这将是

'email'：[null，[Validators.required，Validators.compose（[this.checkIfA]）]]

自动表单的自定义验证

1 个答案: