Angular 表单验证：比较两个字段

Question

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

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

Answer 1

试试这个

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 布尔值错误消息

Answer 2

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

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

然后在组件 class 的定义之外（在同一个文件中），也定义函数 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 无效，方法是将 true 的错误标志（此处 invalidEndDate）添加到 FormGroup 的错误对象。如果您想在任何同级控件上设置特定的错误，那么您可以使用 c.get('endDate').setErrors({ invalidEndDate: true }) 之类的东西在 formControl 上手动设置错误标志。如果这样做，请确保通过将错误设置为 null 来清除它们以获得有效案例，例如 c.get('endDate').setErrors(null).

可以看到类似验证的现场演示 here。

Angular 表单验证：比较两个字段

Angular form validation: compare two fields

forms

angular

validation

angular-forms

angular-validation