反応性フォームのカスタム検証

Question

共有エラーと入力画面 私はAngular2のカスタム検証を検討しています。私が設定され、私はすべての電子メールのテキスト内の値と例外の下に取得を入力すると http://www.kirjai.com/validation-model-driven-forms-ng2/

：

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); 
    } 
} 

は以下である：

以下

TypeError: _this.subscribe is not a function at http://localhost:4200/vendor.bundle.js:58877:15 at new ZoneAwarePromise (http://localhost:4200/vendor.bundle.js:62806:29) at Object.toPromise (http://localhost:4200/vendor.bundle.js:58875:12) at _convertToPromise (http://localhost:4200/vendor.bundle.js:4313:187) at Array.map (native) at FormControl.asyncValidator (http://localhost:4200/vendor.bundle.js:4306:80) at FormControl.AbstractControl._runAsyncValidator (http://localhost:4200/vendor.bundle.js:16916:41) at FormControl.AbstractControl.updateValueAndValidity (http://localhost:4200/vendor.bundle.js:16890:22) at FormControl.setValue (http://localhost:4200/vendor.bundle.js:17146:14) at DefaultValueAccessor.onChange (http://localhost:4200/vendor.bundle.js:5914:17)

は私のコンポーネントのコードであり、以下の記事を経て私のHTMLコード：

<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

あなたが '電子メール' を宣言し、配列

必要があり、複数のバリデータがあります：[ヌル、Validators.required、Validators.compose（[this.checkIfA]）]

を[ヌル、[Validators.required、Validators.compose（[this.checkIfA]）]]