angular4自定义表单控件[(ngModel)]的实现

这篇文章主要介绍了Angular 4中自定义表单控件[(ngModel)]的实现过程，长沙网络推广认为这是一个很好的资源，因此推荐给大家作为参考。接下来，让我们一起跟随长沙网络推广来深入了解。

我们来谈谈[(ngModel)]的拆分。这是一个双向数据绑定机制，将输入属性与输出监听结合起来。具体而言，[ngModel]用于绑定表单元素的值到组件的model上，而(ngModelChange)则用于监听元素值的变化，并同步更新组件的model值。一个简单的例子是：使用标签时，可以通过绑定[ngModel]实现数据双向绑定。

在自定义组件上使用[(ngModel)]时，需要注意不能直接用于非表单类的原生元素或第三方自定义组件上。为了实现与Angular表单的集成，我们需要实现ControlValueAccessor接口。这个接口充当了Angular表单API和DOM中原生元素之间的桥梁。简单来说，只有实现了这个接口的组件，才能使用Angular表单API，比如[(ngModel)]。

接下来，我们详细介绍一下如何实现ControlValueAccessor接口。我们需要实现writeValue方法，该方法用于将组件的model值与DOM元素的值进行同步。我们需要实现registerOnChange方法，用于注册一个回调函数，当DOM元素的值发生变化时，回调函数会被触发并通知Angular更新model值。还需要实现registerOnTouched方法，用于注册一个触摸回调函数，以便在表单验证等场景下使用。我们还可以实现setDisabledState方法，用于设置组件的禁用状态。

```typescript

import { NgModule, Component, OnInit, Input, Output, EventEmitter, ViewChild, ChangeDetectorRef } from '@angular/core';

import { CommonModule } from '@angular/common'; // 注意：此处应为 'common' 而不是 'mon'

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

// 定义常量用于注册NG_VALUE_ACCESSOR

const RADIO_VALUE_ACCESSOR: any = {

provide: NG_VALUE_ACCESSOR,

useExisting: forwardRef(() => PRadioComponent), // 使用forwardRef指向PRadioComponent组件实例

multi: true // 表示可以同时提供多个此类提供者

};

@Component({

selector: 'app-p-radio', // 单选按钮组件的选择器

template: `

`,

styleUrls: ['./p-radioponent.scss'], // 单选按钮组件的样式文件路径

providers: [RADIO_VALUE_ACCESSOR] // 在组件内提供RADIO_VALUE_ACCESSOR常量

})

export class PRadioComponent implements OnInit, ControlValueAccessor { // 实现ControlValueAccessor接口

// 定义组件的输入属性（如name、label和value）和输出事件（如pRadioChange）等... 省略其它代码...

constructor(private cdRef: ChangeDetectorRef) {} // 注入ChangeDetectorRef用于改变检测等操作

// 实现ControlValueAccessor接口的三个方法：writeValue、registerOnChange和registerOnTouched等...省略其它代码...

}

// 定义单选按钮模块的装饰器，用于声明和导出PRadioComponent组件等...省略其它代码...（同原代码相似）

```

现在我们来讨论一下这些方法的调用时机：

`writeValue(value: any)` 方法会在视图值需要更新时调用。例如，当父组件或外部源更新模型值时，该方法将被触发以同步视图状态。在单选按钮的上下文中，它确保选中的状态与模型值相匹配。在这里，我们将更新的模型值传递给此方法，并相应地更新视图中的选中状态。如果视图中的元素已经存在，我们还将更新其 `checked` 属性。我们还使用 `ChangeDetectorRef` 来标记此组件以便后续进行变更检测。这样，Angular就知道何时重新渲染组件以反映的状态变化。该方法通过调用 `onModelChange` 函数来通知父组件视图值已更改。这确保了我们能够在模型值和视图值之间保持同步。在单按钮组件的上下文中，当用户点击某个选项时，该方法将被调用以更新选中状态并同步模型值。如果选中状态发生变化（即用户点击单选按钮），我们将触发此事件并将新的值传递给 `onModelChange` 函数以更新模型状态。这样，我们的组件就能正确地与父组件通信并同步数据。我们也通过 `EventEmitter` 发出一个事件通知外部监听者关于状态的变化。这些方法共同协作以确保我们的单选按钮组件能够正确地与父组件通信并同步数据状态的变化。模型与视图间的双向绑定：以PRadioComponent为例

在API中，当从模型向视图传递数据时，`writeValue()`方法会被触发。那么，究竟什么是model value和view value呢？让我们通过一个PRadioComponent的实例来详细解读。

在给出的代码片段中：``，这里的`checkedValue`属性就是model value，它代表了数据模型中的值。而view value则是PRadioComponent内部的某个属性，例如`this.value`。

当model view（即`checkedValue`）的值发生改变时，PRadioComponent中的`writeValue(obj: any)`方法会被调用。这个方法接收当前model value的值作为参数，并将这个值赋给内部的view value。这样，就从模型（model）更新了视图（view）。PRadioComponent的UI显示也会根据新的model value进行相应的更新。

紧接着，我们来看`registerOnChange(fn: Function): void`这个方法。它的作用是同步view value和model value，即当视图状态发生改变时，能够反过来更新模型状态。该方法通过接收一个函数作为参数，并将这个函数赋值给`this.onModelChange`。当视图value发生变化时，通过调用`this.onModelChange()`，并将view value作为参数传入，实现view到model的同步。

至于`registerOnTouched(fn: any): void`和`setDisabledState(isDisabled: boolean)?: void`这两个方法，在简单的使用[(ngModel)]的场景中并未被使用到。但为了遵循某些编程规范或接口要求，`registerOnTouched`仍然需要实现，因此定义了一个空函数。

实际效果是这样的：初始时，值为'a'，当你点击并改变view value时，通过Angular的调试工具，你会看到值已经更改为'b'。反之，当你在调试工具中改变checkedValue为'a'，视图也会相应地发生更改。这就实现了数据的双向绑定。

双向数据绑定是一个强大的机制，它确保了模型与视图之间的同步。通过PRadioComponent这个实例，我们深入了解了如何实现这一机制的核心方法：`writeValue()`和`registerOnChange()`。希望这篇文章对大家的学习有所帮助，也感谢大家支持狼蚁SEO。