Question

我正在尝试使用FormControls在Angular2中进行日期验证。我有一个开始和结束日期。我需要验证开始日期是否在结束日期之前。以下是我在控件的值更改时编辑验证器的方法：

和

this.editForm.get('startDate').valueChanges.debounceTime(100).subscribe(
    (startDate: any) => {
        if (startDate != null) {
            this.editForm.get('startDate').setValidators([FormValidators.validateDate, FormValidators.validateStartAndCompletionDate(this.editForm.get('startDate'), this.editForm.get('completionDate'))]);
            this.editForm.get('completionDate').updateValueAndValidity();
        } else {
            this.editForm.get('startDate').clearValidators();
        }
        this.editForm.get('startDate').updateValueAndValidity();
    }
)

以下是在开始和结束日期控件上设置错误的验证程序：

this.editForm.get('completionDate').valueChanges.debounceTime(100).subscribe(
    (completionDate: any) => {
        if (completionDate != null) {
            this.editForm.get('completionDate').setValidators([FormValidators.validateDate, FormValidators.validateStartAndCompletionDate(this.editForm.get('startDate'), this.editForm.get('completionDate'))]);
            this.editForm.get('startDate').updateValueAndValidity();
        } else {
            this.editForm.get('completionDate').clearValidators();
        }
        this.editForm.get('completionDate').updateValueAndValidity();
    }
)

验证器工作正常，并准确设置每个FormControl元素的错误。当错误更新后我必须更新每个FormControl的有效性时，问题就出现了。出于某种原因，使用上面的代码，只有正在更改其值的元素才会更新其有效性。

例如，如果开始日期当前在完成日期之后（导致验证程序错误），并且我在开始日期之前更正了开始日期，则开始日期FormControl的有效性将从false更改为true，但完成日期FormControl的有效性仍然是错误的。相反的情况也是如此，更正完成日期以修复错误只会使完成日期FormControl有效，而不是开始日期FormControl。

Answer 1

我会选择Deborah建议的路线。将这些日期放在一个单独的表单组中并对该组进行验证，而不是同时订阅开始日期和完成日期，如下所示：

this.editForm = this.fb.group({
  dates: this.fb.group({
    startDate: [new Date(), Validators.required],
    completionDate: [new Date(), Validators.required],
  },{validator: this.validateMyDates})
});

现在验证位于dates，这也是验证错误在模板中显示验证错误所在的位置。

然后验证器看起来像这样：

validateMyDates(formgroup: FormGroup) { // parameter is the 'dates' formgroup
  let start = formgroup.get('startDate');
  let completion = formgroup.get('completionDate')

  if (completion < start){
     return { invalidStartAndCompletion: true };
  }
  return null;
}

对于错误消息，您可以通过以下方式与其联系：

editForm.hasError('invalidStartAndCompletion', 'dates')

多个FormControl元素的Angular2 updateValueAndValidity

1 个答案: