Angular自定义表单控件
- 创建自定义表单控件组件 在 Angular 中创建自定义表单控件需要创建一个组件，并且实现 ControlValueAccessor 接口。ControlValueAccessor 接口定义了一些方法，允许我们在表单控件和 Angular 表单系统之间进行交互。以下是一个示例组件的代码：
import { Component, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@Component({
selector: 'app-custom-input',
template: ,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
export class CustomInputComponent implements ControlValueAccessor {
value: any = '';
// 发送将控件值写回表单的信号 propagateChange: any = () => {};
// 发送失败信号 propagateTouch: any = () => {};
// 写回表单 writeValue(value: any) { this.value = value; }
// 注册发射器 registerOnChange(fn: any) { this.propagateChange = fn; }
// 注册失败发射器 registerOnTouched(fn: any) { this.propagateTouch = fn; }
// 处理输入变化 handleInputChange(event: any) { this.value = event.target.value; this.propagateChange(this.value); }
// 处理控件失去焦点 handleInputBlur() { this.propagateTouch(); } }
- 注册自定义表单控件组件 要注册自定义表单控件组件，需要将其添加到 declarations 数组中，并在需要使用它的模块中导入该模块。以下是一个示例模块的代码：
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { CustomInputComponent } from './custom-input/custom-input.component';
@NgModule({ declarations: [CustomInputComponent], imports: [ CommonModule, FormsModule, ReactiveFormsModule ], exports: [ FormsModule, ReactiveFormsModule, CustomInputComponent ] }) export class CustomFormsModule { }
- 在表单中使用自定义表单控件 在表单中使用自定义表单控件时，需要在 formControlName 或 ngModel 上使用