反应形式的自定义验证

-3

共享错误和输入屏幕我在探索Angular2中的自定义验证。 http://www.kirjai.com/validation-model-driven-forms-ng2/反应形式的自定义验证

当我配置和我输入了电子邮件正文及任何价值越来越例外如下：

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)

下面是我的部分代码：

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>

来源

2016-12-27 user2144684

还可以看到在的jsfiddle代码： https://jsfiddle.net/kaet1wzn/1/ – user2144684

当你有多个验证您必须声明和数组

'电子邮件'：空，Validators.required，Validators.compose（[this.checkIfA）]

这将是

'电子邮件'：[NULL，[Validators.required，Validators.compose（[this.checkIfA]）]]

来源

2017-01-02 13:05:36 silvelo

反应形式的自定义验证

回答

相关问题