Forms 角度形式验证：比较两个字段

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

例如，假设我的表单有一个

startDate

和一个

endDate

日期字段，我想确保

endDate

必须大于

startDate

试试这个

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

导出类validationComponent实现OnInit{
私有测试表单：FormGroup；
构造函数（私有fb:FormBuilder）{
}
恩戈尼尼特（）{
this.testForm=this.fb.group({
'startDate'：[''[Validators.required]]，
“endDate”：[“”，[需要验证程序]]
});
this.subscribeDateChanges（）；
}
subscribeDateChanges（）{
const startDateChanges=（this.testForm）.controls.startDate.valueChanges；
const endDateChanges=（this.testForm）.controls.endDate.valueChanges；
startDateChanges.subscribe（开始=>{
this.testForm.controls['endDate']。
集合验证器(
[验证器。必需，
CustomValidators.minDate（this.toYYYYMMDD（start））]；
this.validateDates（）；
});
endDateChanges.subscribe（end=>{
this.validateDates（）；
});
}
dateError:boolean=false；
validateDates（）：void{
让startDate=this.testForm.controls['startDate'].value；
让endDate=this.testForm.controls['endDate'].value；
如果（结束日期和开始日期）{
this.dateError=endDate当您想要实现包含一个或多个同级（表单）控件的验证时，必须在同级控件的级别上定义验证程序函数。例如：

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

此验证将通过添加错误标志（此处为
invalidEndDate
）使
FormGroup
无效对该
FormGroup
的errors对象设置
true
。如果希望在任何同级控件上设置特定错误，则可以使用类似于
c.get（'endDate'）.setErrors（{invalidEndDate:true}）的命令手动设置该
formControl
上的错误标志
。如果执行此操作，请确保通过将错误设置为
null
来清除这些错误，例如，
c.get（'endDate'）。setErrors（null）

可以看到类似验证的现场演示。
您是否尝试通过[（ngModel）]访问表单上的两个值然后比较两个值？@ShinDarth在下面我的答案帮助你吗？@Robert谢谢你的答案，但是我使用了amal的解决方案，它看起来更简单。我认为你不需要导出check函数。还有，为什么你将
c
声明为
AbstractControl
，而不仅仅是
FormGroup
？是的，你不需要如果函数在同一个文件中，我必须“导出”它。我将它声明为
AbstractControl
，因为它是
FormGroup
s（以及
FormControl
s和
FormArray
s）的基类。这样做没有坏处。还可以帮助您使用该类“typescript”中定义的所有属性。@ShinDarth您可以用.ts发布code.html吗？我也遇到了同样的情况。提前感谢：）
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
}