【问题标题】:How to add validation in template driven form from component in angular 6如何从 Angular 6 中的组件以模板驱动形式添加验证
【发布时间】:2019-01-24 15:07:03
【问题描述】:

在 Angular 6 中,我们有两种创建表单的方法。

  1. 模型驱动
  2. 模板驱动

在模型驱动的方法中,我们通过组件中的代码定义了验证器。和 在模板驱动的方法中,我们通过模板本身的指令和 HTML5 属性来定义验证器。

有没有办法,在模板驱动的表单中,我们可以从组件代码中定义验证。

我需要在某些输入测试更改时从组件代码中定义和更改文本框的验证。

<input type="text" [(ngModel)]="value" (input)="ValueChangeEvent(myvalue)" /> 

这里,在ValueChangeEvent方法中,我需要更改我的文本框的验证。(例如,当用户输入一些东西时,我只需要在文本框中添加最小值验证。)

【问题讨论】:

    标签: angular typescript validation angular6


    【解决方案1】:

    使用 ControlValueAccessor 在 Angular 中创建自定义表单控件

    ControlValueAccessor 充当 Angular 表单 API 之间的桥梁 以及 DOM 中的原生元素。

    在 Angular 中创建表单时,有时您希望输入不是标准文本输入、选择或复选框。通过实现 ControlValueAccessor 接口并将组件注册为 NG_VALUE_ACCESSOR,您可以将自定义表单控件无缝集成到模板驱动或反应式表单中,就像它是本机输入一样!

    检查这个:https://alligator.io/angular/custom-form-control/

    customFormValidation 示例:https://stackblitz.com/edit/angular-hhgkje

    【讨论】:

    • 是的,我明白了,我们可以使用自定义表单控件,但是我们如何从组件文件中添加验证。根据我的理解,我们应该在控件的 onTouched() 函数中写一些东西,我已经注册了那个事件,但是没有得到调用。
    猜你喜欢
    • 1970-01-01
    • 2018-12-23
    • 1970-01-01
    • 2017-08-05
    • 2020-11-11
    • 1970-01-01
    • 2017-06-27
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多