浅析Angular19 自定义表单控件

1 需求

当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件；自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互

2 官方文档 ->

点击前往

Angular为开发者提供了ControlValueAccessor接口来辅助开发者构建自定义的表单控件，开发者只需要在自定义表单控件类中实现ControlValueAccessor接口中的方法就可以实现模型和视图之间的数据交互

2.1 writeValue

该方法用于将值写入到自定义表单控件中的元素；

这个参数值（obj）是使用这个自定义表单控件的组件通过模板表单或者响应式表单的数据绑定传过来的；

在自定义表单控件的类中只需要将这个值（obj）赋值给一个成员变量即可，自定义表单控件的视图就会通过属性绑定显示出来这个值

2.2 registerOnChange

自定义表单控件的数据发生变化时会触发registerOnChange方法，该方用于如何处理自定义表单控件数据的变化；

registerOnChange方法接收的参数（fn）其实是一个方法，该方法负责处理变化的数据

当自定义控件数据变化时就会自动调用fn执行的方法，但是通常的做法是自定义一个方法 propagateChange 让自定义的方法指向fn，这样当数据变化时只需要调用 propagateChange 就可以对变化的数据进行处理

2.3 registerOnTouched

表单控件被触摸时会触发registerOnTouched方法，具体细节待更新......2018-1-31 11:18:33

2.4 setDisabledState

待更新......2018-1-31 11:19:30

3 编程步骤

3.1 创建自定义表单控件组件

当前计数为：{{countNumber}}

.1.1 功能描述

点击增加按钮时当前计数会增加1，点击减少按钮时当前计数会剪1

3.1.2 直接在其他组件中使用时会报错

3.2 如何让组件变成一个表单控件组件

3.2.1 实现 ControlValueAccessor 接口

3.2.2 指定依赖信息providers

3.2.3 待修复bug

虽然可以正常运行，但是表单控件中的元素接受不到使用表单控件那个组件中表单模型传过来的数据，表单控件变化的数据也无法回传到使用表单控件那个组件中的表单模型中去；简而言之，就是模型和视图之间无法进行数据交互

3.3 实习那模型和试图的数据交互

3.3.1 模型到视图

技巧01：writeValue 方法中的参数是使用自定义表单控件的那个组件通过表单的数据绑定传进来的

email输入框的信息如下：

有效性：{{testForm.get('email').valid}}

email输入框的错误信息为：{{testForm.get('email').errors | json}}

required验证结果：{{testForm.hasError('required','email') | json}}

minLength验证结果：{{ testForm.hasError('minLength','email') | json }}

hello:{{ testForm.controls['email'].errors | json }}

浅析Angular19 自定义表单控件

1 需求

2 官方文档 ->

2.1 writeValue

2.2 registerOnChange

2.3 registerOnTouched

2.4 setDisabledState

3 编程步骤

3.1 创建自定义表单控件组件

当前计数为：{{countNumber}}

.1.1 功能描述

3.1.2 直接在其他组件中使用时会报错

3.2 如何让组件变成一个表单控件组件

3.2.1 实现 ControlValueAccessor 接口

3.2.2 指定依赖信息providers

3.2.3 待修复bug

3.3 实习那模型和试图的数据交互

3.3.1 模型到视图

3.3.2 视图到模型

3.4 自定义表单控件组件代码汇总

当前计数为：{{countNumber}}

绿线上是自定义提取的表单控件显示的内容

绿线下是使用自定义表单控件时表单的实时数据

表单控件的值为：{{myForm.value | json}}

ngif变量的值为true

<div class="panel panel-primary"> <div class="panel-heading">RXJS使用 <div class="panel-body">

测试内容

表单整体信息如下：

表单数据有效性：{{testForm.valid}}

表单数据为：{{testForm.value | json}}

获取单个或多个FormControl：{{testForm.controls['email'] }}

email输入框的信息如下：

有效性：{{testForm.get('email').valid}}

email输入框的错误信息为：{{testForm.get('email').errors | json}}

required验证结果：{{testForm.hasError('required','email') | json}}

minLength验证结果：{{ testForm.hasError('minLength','email') | json }}

hello:{{ testForm.controls['email'].errors | json }}

password输入框啊的信息如下：

有效性：{{testForm.get('password').valid}}

password输入框的错误信息为：{{testForm.get('password').errors | json }}

required验证结果：{{testForm.hasError('required','password') | json}}

data变量：{{data}}

名为desc的表单控件的值为：{{ a.value }}

测试checkBox被选中啦

描述

例子

猜你在找的JavaScript相关文章

<div class="panel panel-primary">
<div class="panel-heading">RXJS使用
<div class="panel-body">