Angular之ControlValueAccessor接口怎么使用

发布时间：2023-03-11 09:35:24 作者：iii
来源：亿速云阅读：185

Angular之ControlValueAccessor接口怎么使用

在Angular中，表单处理是一个非常重要的部分。Angular提供了两种表单处理方式：模板驱动表单和响应式表单。无论是哪种方式，Angular都提供了丰富的API来帮助我们处理表单数据。然而，在某些情况下，我们可能需要自定义表单控件，以便更好地满足业务需求。这时，ControlValueAccessor接口就派上了用场。

本文将详细介绍ControlValueAccessor接口的使用方法，并通过示例代码帮助读者更好地理解如何自定义表单控件。

1. 什么是ControlValueAccessor接口？

ControlValueAccessor是Angular中的一个接口，它充当了Angular表单控件与DOM元素之间的桥梁。通过实现这个接口，我们可以自定义表单控件，并将其与Angular的表单机制无缝集成。

ControlValueAccessor接口定义了四个方法：

writeValue(obj: any): void：将模型中的值写入视图（DOM元素）。
registerOnChange(fn: any): void：注册一个回调函数，当视图中的值发生变化时调用。
registerOnTouched(fn: any): void：注册一个回调函数，当控件失去焦点时调用。
setDisabledState(isDisabled: boolean)?: void：设置控件的禁用状态。

通过实现这些方法，我们可以将自定义控件与Angular的表单机制连接起来，从而实现双向数据绑定、表单验证等功能。

2. 为什么需要ControlValueAccessor？

在Angular中，内置的表单控件（如input、select等）已经实现了ControlValueAccessor接口，因此它们可以直接与Angular的表单机制集成。然而，当我们自定义表单控件时，Angular并不知道如何将自定义控件与表单机制连接起来。这时，我们就需要手动实现ControlValueAccessor接口，以便让Angular知道如何处理自定义控件的值变化、状态变化等。

通过实现ControlValueAccessor接口，我们可以：

将自定义控件与Angular的表单机制集成，实现双向数据绑定。
支持表单验证。
支持控件的禁用状态。

3. 如何实现ControlValueAccessor接口？

接下来，我们将通过一个简单的示例来演示如何实现ControlValueAccessor接口。假设我们需要自定义一个简单的评分控件，用户可以通过点击星星来评分。

3.1 创建自定义评分控件

首先，我们创建一个新的Angular组件，命名为rating。

ng generate component rating

3.2 实现ControlValueAccessor接口

在rating.component.ts中，我们实现ControlValueAccessor接口。

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

@Component({
  selector: 'app-rating',
  template: `
    <div class="rating">
      <span *ngFor="let star of stars; let i = index" (click)="rate(i + 1)">
        {{ star }}
      </span>
    </div>
  `,
  styles: [
    `
      .rating {
        font-size: 24px;
        cursor: pointer;
      }
      .rating span {
        color: #ccc;
      }
      .rating span.active {
        color: #ffcc00;
      }
    `,
  ],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => RatingComponent),
      multi: true,
    },
  ],
})
export class RatingComponent implements ControlValueAccessor {
  @Input() maxRating = 5;
  stars: string[] = [];
  rating = 0;
  onChange: any = () => {};
  onTouched: any = () => {};

  ngOnInit() {
    this.stars = Array(this.maxRating).fill('★');
  }

  rate(rating: number) {
    this.rating = rating;
    this.onChange(rating);
    this.onTouched();
  }

  writeValue(obj: any): void {
    this.rating = obj;
  }

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

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

  setDisabledState(isDisabled: boolean): void {
    // 这里可以处理控件的禁用状态
  }
}

3.3 解释代码

NG_VALUE_ACCESSOR：我们使用NG_VALUE_ACCESSOR提供器将RatingComponent注册为ControlValueAccessor的实现。multi: true表示可以有多个ControlValueAccessor实现。
writeValue：当表单模型的值发生变化时，Angular会调用writeValue方法，将新的值传递给控件。在这里，我们将新的评分值赋值给this.rating。
registerOnChange：我们注册一个回调函数onChange，当用户点击星星时，调用这个回调函数，将新的评分值传递给表单模型。
registerOnTouched：我们注册一个回调函数onTouched，当控件失去焦点时调用这个回调函数。
setDisabledState：这个方法用于设置控件的禁用状态。在这个示例中，我们没有实现具体的禁用逻辑，但你可以根据需要在这里处理控件的禁用状态。

3.4 使用自定义评分控件

现在，我们可以在模板中使用自定义的评分控件了。

<form [formGroup]="form">
  <app-rating formControlName="rating"></app-rating>
</form>

在组件中，我们需要初始化表单。

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <app-rating formControlName="rating"></app-rating>
    </form>
    <p>当前评分: {{ form.value.rating }}</p>
  `,
})
export class AppComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      rating: [3], // 默认评分为3
    });
  }
}

3.5 运行效果

当我们运行这个应用时，会看到一个评分控件，用户可以通过点击星星来评分。评分值会实时更新到表单模型中，并在页面上显示出来。

4. 支持表单验证

自定义控件不仅可以与表单模型进行双向数据绑定，还可以支持表单验证。我们可以通过实现Validator接口来为自定义控件添加验证逻辑。

4.1 实现Validator接口

假设我们需要为评分控件添加一个验证规则：评分不能为0。我们可以通过实现Validator接口来实现这个验证逻辑。

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'app-rating',
  template: `
    <div class="rating">
      <span *ngFor="let star of stars; let i = index" (click)="rate(i + 1)" [class.active]="i < rating">
        {{ star }}
      </span>
    </div>
  `,
  styles: [
    `
      .rating {
        font-size: 24px;
        cursor: pointer;
      }
      .rating span {
        color: #ccc;
      }
      .rating span.active {
        color: #ffcc00;
      }
    `,
  ],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => RatingComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => RatingComponent),
      multi: true,
    },
  ],
})
export class RatingComponent implements ControlValueAccessor, Validator {
  @Input() maxRating = 5;
  stars: string[] = [];
  rating = 0;
  onChange: any = () => {};
  onTouched: any = () => {};

  ngOnInit() {
    this.stars = Array(this.maxRating).fill('★');
  }

  rate(rating: number) {
    this.rating = rating;
    this.onChange(rating);
    this.onTouched();
  }

  writeValue(obj: any): void {
    this.rating = obj;
  }

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

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

  setDisabledState(isDisabled: boolean): void {
    // 这里可以处理控件的禁用状态
  }

  validate(control: AbstractControl): ValidationErrors | null {
    const value = control.value;
    if (value === 0) {
      return { required: true };
    }
    return null;
  }
}

4.2 解释代码

NG_VALIDATORS：我们使用NG_VALIDATORS提供器将RatingComponent注册为Validator的实现。
validate：我们实现validate方法，当表单控件的值发生变化时，Angular会调用这个方法进行验证。如果评分为0，我们返回一个错误对象{ required: true }，否则返回null。

4.3 使用验证逻辑

在模板中，我们可以使用Angular的表单验证机制来显示错误信息。

<form [formGroup]="form">
  <app-rating formControlName="rating"></app-rating>
  <div *ngIf="form.get('rating').hasError('required')">评分不能为0</div>
</form>

4.4 运行效果

当我们运行这个应用时，如果用户将评分设置为0，页面上会显示“评分不能为0”的错误信息。

5. 总结

通过实现ControlValueAccessor接口，我们可以将自定义表单控件与Angular的表单机制无缝集成，从而实现双向数据绑定、表单验证等功能。本文通过一个简单的评分控件示例，详细介绍了如何实现ControlValueAccessor接口，并展示了如何为自定义控件添加验证逻辑。

希望本文能帮助你更好地理解ControlValueAccessor接口的使用方法，并在实际项目中灵活运用。

Angular之ControlValueAccessor接口怎么使用

Angular之ControlValueAccessor接口怎么使用

1. 什么是ControlValueAccessor接口？

2. 为什么需要ControlValueAccessor？

3. 如何实现ControlValueAccessor接口？

3.1 创建自定义评分控件

3.2 实现ControlValueAccessor接口

3.3 解释代码

3.4 使用自定义评分控件

3.5 运行效果

4. 支持表单验证

4.1 实现Validator接口

4.2 解释代码

4.3 使用验证逻辑

4.4 运行效果

5. 总结

相关阅读