从 HostListener 事件中将表单字段设置为无效

【问题标题】：Set form field as invalid from HostListener event从 HostListener 事件中将表单字段设置为无效
【发布时间】：2017-07-10 18:25:22
【问题描述】：

我正在使用 Angular 4 并且对它很新。我使用模板驱动的表单。我有一个表单字段，我有一些模式匹配。所以我注册了一些事件，例如

@HostListener('blur', ['$event'])
    onBlur(event) {
        // this.validateFormControl.markAsTouched();
        console.log(event);
        console.log(this.elementRef)
console.log(this.elementRef.nativeElement)

我想检查其中的表单元素的状态是有效还是无效，并根据其中的某些条件进行一些额外的检查并将表单元素设置为无效。如何在此函数内部将表单元素设置为无效。

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

Template Driven Forms 与 Reactive Forms 相比非常有限，我强烈建议使用后者，因为它背后有强大的 API。

但如果您真的需要使用Template Driven Forms 来添加一些自定义验证，您可以尝试使用表单元素的setCustomValidity 和checkValidity 方法。

我不建议为Template Driven Forms 创建任何程序验证，因为这不是它们最初设计的方式，而是使用Reactive Forms 并阅读this guide。

【讨论】：

我只有 2 个表单域。这就是我使用模板驱动表单的原因。