如何在 Angular 2+ 中延迟输入验证

Question

在 AngularJS 中，您可以使用指令设置输入以延迟验证

link(scope, elem, attr, ngModel) {
    ngModel.$overrideModelOptions({
        updateOn: 'default blur',
        debounce: {
            blur: 0,
            default: 500,
        },
    });
}

它的作用是：当输入改变时，在输入从有效/无效验证之前给出 500 毫秒的延迟。

在 Angular2+ 中，这似乎更加困难。我想我可以用 observables 监听变化并更新验证，但我如何告诉初始输入不验证？

Answer 1

由于 Angular 5.0 对何时运行表单验证有了更多控制。您可以使用updateOn 选项将验证配置为在blur 或submit 上运行。

1. 反应形式示例：

将在表单控件模糊上运行验证器：

new FormControl(null, {
  updateOn: 'blur'
});

将在表单提交后运行验证器：

new FormGroup({
  fistName: new FormControl(),
  lastName: new FormControl()
}, { updateOn: 'submit' });

1. 模板驱动的表单：

将在表单控件模糊上运行验证器：

<input [(ngModel)]="firstName" [ngModelOptions]="{updateOn: 'blur'}">

将在表单提交后运行验证器：

更多信息在docs

正如 cmets 中的某个人所提到的，您还可以订阅表单值更改流，但如果您对延迟表单验证感兴趣，您可能应该查看 updateOn 属性。