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

Question

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

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

它的作用是：当输入发生变化时，在输入从 valid/invalid 生效之前给出 500 毫秒的延迟。

在Angular2+中，这似乎更难。我想我可以用可观察对象监听变化并以这种方式更新验证，但是我如何告诉初始输入不验证？

Answer 1

自 Angular 5.0 以来，可以更好地控制何时运行您的表单验证。您可以使用 updateOn 选项在 blur 或 submit 上将验证配置为运行。

响应式表单示例：

表单控件上的运行验证器是否会模糊：

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

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

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

模板驱动表单：

表单控件上的运行验证器是否会模糊：

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

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

更多信息在 docs

正如评论中提到的那样，您也可以订阅表单值更改流，但如果您对延迟表单验证感兴趣，您可能应该查看 updateOn 属性 .

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

How to delay input validation in Angular 2+

angular-directive

angular-directive-link

angular