javascript - 多个 FormControl 元素的 Angular2 updateValueAndValidity

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

这是在开始和结束日期控件上设置错误的验证器:

static validateStartAndCompletionDate(start: any, completion: any) {
        return (f: FormControl) => {
            if (start.value != null && completion.value != null) {
                var startDate = new Date(start.value.date.year, start.value.date.month - 1, start.value.date.day);
                var completionDate = new Date(completion.value.date.year, completion.value.date.month - 1, completion.value.date.day);
                if (startDate.getTime() > completionDate.getTime()) {
                    start.setErrors({
                        "invalidStartAndCompletion": true
                    });
                    completion.setErrors({
                        "invalidStartAndCompletion": true
                    });
                    return { invalidStartAndCompletion: true };
                } else {
                    start.setErrors({
                        "invalidStartAndCompletion": null
                    });
                    completion.setErrors({
                        "invalidStartAndCompletion": null
                    });
                    return null;
                }
            }
        }
    }

验证器工作正常并且准确地设置了每个 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')