angular中使用 ngModel 自定义组件_angualr如何封装自定义表单组件

要创建一个自定义的 Angular 组件，并使用 ngModel 进行双向数据绑定，您可以按照以下步骤操作：

1. 创建自定义组件：首先，使用 Angular CLI 或手动创建一个新的组件。在组件的模板中，添加一个输入元素或其他适合您的控件，并为其添加一个唯一的标识符，例如一个模板引用变量。
2. 导入必要的模块和服务：在您的组件类中，导入 ControlValueAccessor 和 NG_VALUE_ACCESSOR。这些是从 @angular/forms 模块中提供的。

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
1
2

3. 实现 ControlValueAccessor 接口：为了使您的自定义组件能够与 ngModel 指令一起使用，您需要实现 ControlValueAccessor 接口。该接口定义了一组方法，用于处理控件值的获取和设置，以及处理表单控件状态的更改。您可以实现这些方法以满足您的需求。

@Component({
  selector: 'app-custom-input',
  template: `
    <input type="text" [(ngModel)]="value" (input)="onChange($event.target.value)" [disabled]="isDisabled">
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  private _value: any;
  private _onTouchedCallback: () => void = () => {};
  private _onChangeCallback: (_: any) => void = () => {};
  isDisabled = false;

  writeValue(value: any): void {
    this._value = value;
  }

  registerOnChange(fn: any): void {
    this._onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this._onTouchedCallback = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }

  onChange(value: any): void {
    this._value = value;
    this._onChangeCallback(value);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

在上面的示例中，我们创建了一个名为 CustomInputComponent 的组件，它实现了 ControlValueAccessor 接口。在模板中，我们使用了一个输入元素，并通过 [(ngModel)] 进行了双向数据绑定。我们还添加了一个 (input) 事件监听器来捕获输入值的变化，并调用 onChange 方法进行处理。此外，我们还实现了 writeValue、registerOnChange、registerOnTouched 和 setDisabledState 方法，以满足 ControlValueAccessor 接口的要求。最后，我们使用 providers 数组将自定义组件注册为 ngModel 指令的合法目标。
4. 使用自定义组件：现在，您可以在父组件中使用自定义组件，并使用 ngModel 指令将其绑定到 Angular 组件中的属性。例如：

<app-custom-input [(ngModel)]="myValue"></app-custom-input>
1

在父组件的类中，您可以定义一个名为 myValue 的属性，它将与自定义组件的输入值进行双向绑定。当输入值发生变化时，myValue 属性也会相应更新。此外，您还可以使用 Angular 表单的其他功能，例如验证、错误处理等。