angular4自定义表单控件[(ngModel)]的实现资源-CSDN文库

185 浏览量 2020-12-09 13:52:34 上传评论收藏 108KB PDF 举报

资源详情

资源评论

资源推荐

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

[(ngModel)]拆分拆分

[(ngModel)] 将[]输入()输出组合起来，进行双向数据绑定。拆分开来

输入属性

[ngModel](ngModelChange)输出监听元素值的变化，并同步view value与model value。

代码如下:<input type=”text” id=”modelInner” [ngModel]=”model” (ngModelChange)=”getModelChange($event)”>

model: string;

constructor() {

this.model = 'model init';

}

getModelChange(event: string) {

this.model = event; // view value 与 model value 同步

}

自定义组件上使用自定义组件上使用 [(ngModel)]

我们不能把[(ngModel)]用到非表单类的原生元素或第三方自定义组件上，除非写一个合适的值访问器，这种技巧

超出了本章的范围。

Angular文档中描述到这里，就中止了。刚好我要定制一个模拟radio的组件，只能如文档所说，依葫芦画瓢实现

ControlValueAccessor。

ControlValueAccessor接口接口

ControlValueAccessor acts as a bridge between the Angular forms API and a native element in the DOM.

Implement this interface if you want to create a custom form control directive that integrates with Angular forms.

简而言之，实现了这个接口的组件，就可以使用 Angular forms API，比如[(ngModel)] 。

interface ControlValueAccessor {

writeValue(obj: any): void

registerOnChange(fn: any): void

registerOnTouched(fn: any): void

setDisabledState(isDisabled: boolean)?: void

}

实现实现ControlValueAccessor步骤步骤

模仿primeng中的自定义radio组件，写了一个简单的自定义radio组件。

创建一个RADIO_VALUE_ACCESSOR常量用来在组件中注册NG_VALUE_ACCESSOR

实现ControlValueAccessor中的3+1个方法

完整demo代码如下：

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

import { CommonModule } from '@angular/common';

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

const RADIO_VALUE_ACCESSOR: any = {

provide: NG_VALUE_ACCESSOR,

useExisting: forwardRef(() => PRadioComponent),

multi: true

};

@Component({

selector: 'app-p-radio',

template: `

<div class="p-radio">

<label class="radio-label" (click)="select()" *ngIf="label">

<div class="name" [class.checked-name]="rb.checked">{{label}}</div>

</label>

<div class="helper-hidden-accessible">

<input #rb type="radio" [attr.name]="name" [attr.value]="value" [checked]="checked">

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

内容反馈

weixin_38640794

粉丝: 4
资源: 942

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip