forms - 角度表单验证：比较两个字段

Question

在 Angular 4 应用程序中，如何验证表单的两个字段进行比较？

例如，假设我的表单有一个startDate和一个endDate日期字段，并且我想确保endDate必须大于startDate.

Answer 1

当您想要实现包含一个或多个同级（表单）控件的验证时，您必须在同级控件的上层/之上定义验证器函数。例如：

ngOnInit() {
    this.form = this.formbuilder.group({
        'startDate': ['', [<control-specific - validations >]],
        'endDate': ['', [<control-specific - validations >]]
    }, { validator: checkIfEndDateAfterStartDate });
}

然后在组件类的定义之外（在同一个文件中），checkIfEndDateAfterStartDate也定义函数。

export function checkIfEndDateAfterStartDate (c: AbstractControl) {
    //safety check
    if (!c.get('startDate').value || !c.get('endDate').value) { return null }
    // carry out the actual date checks here for is-endDate-after-startDate
    // if valid, return null,
    // if invalid, return an error object (any arbitrary name), like, return { invalidEndDate: true }
    // make sure it always returns a 'null' for valid or non-relevant cases, and a 'non-null' object for when an error should be raised on the formGroup
}

此验证将FormGroup通过将错误标志（此处invalidEndDate）添加true到该错误对象来使无效FormGroup。如果您想在任何同级控件上设置特定错误，那么您可以formControl使用类似的东西手动设置错误标志，c.get('endDate').setErrors({ invalidEndDate: true }). 如果您这样做，请确保通过将错误设置为nulllike this,来清除它们以获取有效案例c.get('endDate').setErrors(null)。

可以在此处查看类似验证的现场演示。

Answer 2

尝试这个

export class validationComponent implements OnInit {
     private testForm:FormGroup;

     constructor(private fb: FormBuilder) {

     }

     ngOnInit() {
         this.testForm = this.fb.group({
           'startDate': ['', [Validators.required]],
           'endDate': ['', [Validators.required]]
        });

       this.subscribeDateChanges();
    }

    subscribeDateChanges() {
        const startDateChanges = (<any>this.testForm).controls.startDate.valueChanges;
        const endDateChanges = (<any>this.testForm).controls.endDate.valueChanges;

        startDateChanges.subscribe(start => {
             this.testForm.controls['endDate'].
               setValidators(
                [Validators.required,
                CustomValidators.minDate(this.toYYYYMMDD(start))]);
        this.validateDates();
       });

       endDateChanges.subscribe(end => {
               this.validateDates();
         });
     }

   dateError: boolean = false;
   validateDates(): void{
       let startDate = this.testForm.controls['startDate'].value;
       let endDate = this.testForm.controls['endDate'].value;
       if(endDate && startDate){
           this.dateError = endDate <= startDate;
        }
    }

   toYYYYMMDD(d:Date): string {
       d = new Date(d)
       var yyyy = d.getFullYear().toString();
       var mm = (d.getMonth() + 101).toString().slice(-2);
       var dd = (d.getDate() + 100).toString().slice(-2);
       return yyyy + '-' +  mm + '-'  + dd;
   }

根据您显示错误消息的dateError布尔值