forms - Angular 形式验证 : compare two fields

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 的错误对象中 窗体组。如果您想在任何同级控件上设置特定错误，则可以使用类似 c.get('endDate ').setErrors({ invalidEndDate: true }).如果你这样做，然后确保通过将错误设置为 null 来清除它们以获得有效案例，c.get('endDate').setErrors(null).

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