如何从angular 6中的组件在模板驱动表单中添加验证

如何从angular 6中的组件在模板驱动表单中添加验证,angular,typescript,validation,angular6,Angular,Typescript,Validation,Angular6,在angular 6中,我们有两种方法来创建表单 模型驱动 模板驱动 在模型驱动的方法中,我们通过组件中的代码定义了验证器。及 在模板驱动的方法中,我们通过模板本身中的指令和HTML5属性定义验证器 是否有任何方法,在模板驱动的表单中,我们可以从组件代码定义验证 我需要在一些输入测试更改上定义和更改来自组件代码的文本框的验证 <input type="text" [(ngModel)]="value" (input)="ValueChangeEvent(myvalue)" />

在angular 6中,我们有两种方法来创建表单

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

    是否有任何方法,在模板驱动的表单中,我们可以从组件代码定义验证

    我需要在一些输入测试更改上定义和更改来自组件代码的文本框的验证

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

    在这里,在
    valuechangevent
    方法中,我需要更改文本框的验证。(例如,当用户键入某个内容时,我只需要在文本框中添加最小值验证。)

    使用ControlValueAccessor在文本框中创建自定义表单控件

    ControlValueAccessor充当角度窗体API之间的桥梁 以及DOM中的本机元素

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

    选中此项:


    customFormValidation示例:

    是的,我知道了,我们可以使用CustomForm控件,但是如何从组件文件中添加验证呢。根据我的理解,我们应该在control的onTouched()函数中编写一些东西,我已经注册了该事件,但没有得到调用。请检查以下内容: