angular js创建表单_浅析Angular19 自定义表单控件

1 需求

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

2 官方文档 ->点击前往

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

interface ControlValueAccessor {

writeValue(obj: any): void

registerOnChange(fn: any): void

registerOnTouched(fn: any): void

setDisabledState(isDisabled: boolean)?: void

}

2.1 writeValue

writeValue(obj: any): void

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

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

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

2.2 registerOnChange

registerOnChange(fn: any): void

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

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

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

2.3 registerOnTouched

registerOnTouched(fn: any): void

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

2.4 setDisabledState

setDisabledState(isDisabled: boolean)?: void

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

3 编程步骤

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

当前计数为：{ {countNumber}}

增加

add

减少

remove

HTML

import { Component, OnInit } from '@angular/core';

import { ControlValueAccessor } from '@angular/forms';

@Component({

selector: 'app-counter',

templateUrl: './counter.component.html',

styleUrls: ['./counter.component.scss']

})

export class CounterComponent implements OnInit {

countNumber: number = 0;

constructor() { }

ngOnInit() {

}

onIncrease() {

this.countNumber++;

}

onDecrease() {

this.countNumber--;

}

}

3.1.1 功能描述

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

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

报错信息如下：

错误信息是说我们我们使用的组件还不是一个表单控件

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

3.2.1 实现 ControlValueAccessor 接口

export class CounterComponent implements OnInit, ControlValueAccessor {

countNumber: number = 0;

constructor() { }

ngOnInit() {

}

onIncrease() {

this.countNumber++;

}

onDecrease() {

this.countNumber--;

}

/**将数据从模型传输到视图 */

writeValue(obj: any): void