Angular FormGroup 验证器不会在 FormControl 上保留 setError

Question

我有一个表单组来管理一天中的时间，如下所示：

      time: new FormGroup({
        date: new FormControl(new Date()),
        startTime: new FormControl(null),
        startTimeMeridian: new FormControl(MERIDIAN.PM),
        stopTime: new FormControl(null),
        stopTimeMeridian: new FormControl(MERIDIAN.PM)
      }, [MyCustomValidators.futureDateTime()]),

在我的futureDateTime() group 验证器中，我执行了一些逻辑来验证 formGroup，如果它无效，我执行以下操作：

control.get('startTime').setErrors(MY_CUSTOM_ERROR) // MY_CUSTOM_ERROR is a valid error object

或除control.get('stopTime') 外相同。这第一次起作用，并在 FormControls 首次进入无效状态时适当地设置错误。但是第二次，它们有空的错误对象。

我设置了调试点以缩小发生的范围，并且我的 FormGroup 验证器再次在控件上适当地设置错误，但看起来 Angular 代码中的某些内容正在清除错误对象。

如何通过 FormGroup 验证器在控件上设置错误对象？

编辑：

我不确定是什么消除了我的错误，但我能够将错误对象结构更改为错误数组，然后将它们设置在 FormGroup 上。

我现在将它们设置在 FormGroup 上，而不是 formControls startTime 或 stopTime 有错误，我的 UI 将检查 FormGroup 错误中的任何相关反馈。

Answer 1

我从 github 上的另一个问题中找到了这个解决方案： github solution to how to setErrors in FormGroups

但是 fromgroup.valid 在我的代码中没有考虑到这个错误，所以我用一个布尔参数手动检查了它，在这个例子中：

伪代码：

const timeError: boolean = "startTime before new Date()"
const formStartTimeControl = this.time.controls.startTime;
if (timeError) {
    setTimeout(() => {
        formStartTimeControl.markAsDirty();
        formStartTimeControl.markAsTouched();
        formStartTimeControl.setErrors(MY_CUSTOM_ERROR);
    }, 1);
} else {
    setTimeout(() => {
        formStartTimeControl.markAsDirty();
        formStartTimeControl.markAsTouched();
        formStartTimeControl.setErrors(null);
    }, 1);
}
// [...] other code
if(formGroup.valid && !timeError){
    // continue with submitting code
}

但是你必须为代码工作设置一个超时，这让我觉得它看起来像是一个狡猾的解决方案，看看是否有更好的解决方案会很有趣。