angular2中的表单生成器客户验证？答案

【问题标题】：Form Builder Customer validation in angular2?angular2中的表单生成器客户验证？
【发布时间】：2017-03-09 18:02:46
【问题描述】：

我已经使用<form>在angular2中创建了一个注册表单，如下所示：

<form [formGroup]="RegisterForm3">

                    <ion-item>
                        <ion-label>Last Date:</ion-label>
                        <ion-input formControlName="LastDate" min="2016" type="date"></ion-input>
                    </ion-item>
                    <hr/>
                    <ion-item>
                        <ion-label>Next  Date:</ion-label>
                        <!--<ion-input formControlName="NextPayDate" type="number"></ion-input>-->
                        <ion-datetime displayFormat="MM/DD/YYYY" formControlName="NextDate" (OnChanges)="npay()"></ion-datetime>
                    </ion-item>
                    <span style="color:red" *ngIf="!RegisterForm3.controls.NextPayDate.valid &&  (!RegisterForm3.controls.NextDate.dirty || submitAttempt)"> * Next day Must Be Greater Than Today's Date </span>
                    <hr/>
                    <ion-item>
                        <ion-label>SecondDate:</ion-label>
                        <!--<ion-input formControlName="SecondDate" type="number"></ion-input>-->
                        <ion-datetime displayFormat="MM/DD/YYYY" formControlName="SecondDate"></ion-datetime>
                    </ion-item>
                    <hr/>
                    <ion-item>
                        <ion-label>Original Date:</ion-label>

                        <ion-datetime displayFormat="MM/DD/YYYY" formControlName="RequestedDate"></ion-datetime>
                    </ion-item>
                    <span style="color:red" *ngIf="!RegisterForm3.controls.RequestedDate.valid &&  (!RegisterForm3.controls.RequestedDate.dirty || submitAttempt)"> * RequestedDate Should Be 5 days Greater Than Today's Date </span>
                </form>

然后是form.ts

  this.RegisterForm3 = formBuilder.group({           
        LastDate: ['', Validators.required],
        NextDate:['',NextDayValidator.isValid],
        SecondDate: ['',Validators.required],
        RequestedDate:['',OriginalDateValidator.isValid],

    });

然后我创建了两个自定义验证器类。

import { FormControl } from '@angular/forms';

export class OriginalDateValidator {

    static isValid(control: FormControl): any {
        var todaydate =new Date(Date.now() + (1000  * 60  * 60  * 24 * 10))
        console.log(todaydate);
        let duedate=new Date(control.value);
        console.log(duedate);
        console.log(duedate<todaydate);
       //alert(npay);
        if(!duedate){
           return {
                "is empty": true
            };
        }
        if(duedate<todaydate){

             return {
                "Day must 5day greater then todaydate": true
            };
        }
        return null;
    }

}

现在的问题是，RequestedDate 必须是 NextDate 或 SecondDate。所以，我需要在我的 OriginalDateValidators 类中测试这个条件。只有我能够访问 RequestedDate，在我的验证器中单独控制值。但我还需要在我的验证器中访问 NextDate 和 SecondDate。是否可以访问我的验证器类中的这些字段？有什么帮助吗？

【问题讨论】：

标签： angular typescript ionic2

【解决方案1】：

您可以尝试通过引用 formGroup 来访问其他控件：

export class OriginalDateValidator {
  static isValid(control: FormControl): any {
    let formGroup = control.parent;
    if(formGroup) {
      let secondDateControl = formGroup.get('SecondDate');
      console.log(secondDateControl.value);
    }

【讨论】：

嗨 @YurZui 可能会从验证器类中获取错误消息