[(ngModel)]拆分
[(ngModel)] 將[]輸入()輸出組合起來，進行雙向數據綁定。拆分開來
[ngModel](ngModelChange)輸出監聽元素值的變化，并同步view value與model value。
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_ACCESSORControlValueAccessor中的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">
</div>
<div class="radio-md" (click)="handleClick()">
<div class="radio-icon " [class.radio-checked]="rb.checked">
<div class="radio-inner"></div>
</div>
</div>
</div>
`,
styleUrls: ['./p-radio.component.scss'],
providers: [RADIO_VALUE_ACCESSOR]
})
export class PRadioComponent implements ControlValueAccessor {
@Input() name: string;
@Input() label: string;
@Input() value: string;
checked: boolean;
@ViewChild('rb') inputViewChild: ElementRef;
@Output() pRadioChange: EventEmitter<any> = new EventEmitter();
onModelChange: Function = () => { };
constructor(
private cd: ChangeDetectorRef
) { }
// model view -> view value
writeValue(value: any): void {
if (value) {
this.checked = (value === this.value);
if (this.inputViewChild.nativeElement) {
this.inputViewChild.nativeElement.checked = this.checked;
}
this.cd.markForCheck();
}
}
// view value ->model value
registerOnChange(fn: Function): void {
this.onModelChange = fn;
}
registerOnTouched(fn: Function): void { }
handleClick() {
this.select();
}
select() {
this.inputViewChild.nativeElement.checked = !this.inputViewChild.nativeElement.checked;
this.checked = !this.checked;
if (this.checked) {
this.onModelChange(this.value); // 同步view value 和 model value
} else {
this.onModelChange(null);
}
this.pRadioChange.emit(null);
}
}
@NgModule({
imports: [CommonModule],
exports: [PRadioComponent],
declarations: [PRadioComponent]
})
export class RadioButtonModule { }
方法何時被調用？
writeValue(obj: any): void
API中提到 (model -> view) 時，writeValue() 會被調用。
model value 和 view value分別指什么？
舉個調用PRadioComponent的例子：
這里checkedValue屬性就是model value，view value 為PRadioComponent內部的某個屬性（PRadioComponent中定義為this.value）。
當model view（checkedValue）發生改變時，PRadioComponent中的writeValue(obj: any)就會被調用，參數為當前model value（checkedValue）的值，在函數中將參數值賦給內部的view value，從而實現(model -> view)。接受到model value的值后，改變PRadioComponent的UI顯示。
registerOnChange(fn: any): void
這個方法的作用是同步 view value 和 model value (view -> model)，
registerOnChange(fn: Function): void {
this.onModelChange = fn;
}
調用this.onModelChange()時候，將view value當作參數傳入此方法中，即完成了同步，此例子中this.onModelChange(this.value);。
上面兩種方法是相對的：
writeValue(obj: any): model value發生改變 ，完成后UI發生改變(model value-> view value)registerOnChange(fn: any): 觸發事件（比如click），view value和UI發生改變，完成調用后model value與view value同步(view value-> model value)registerOnTouched(fn: any): void
setDisabledState(isDisabled: boolean)?: void
目的只為在控件中簡單的使用[(ngModel)]，所以這兩個方法沒有用到。registerOnTouched(fn: any)必須實現，所以定義了一個空函數。
實際效果
初始值為'a'，點擊改變view value，在Angury調試工具中看到值改為'b'。然后在調試工具中將checkedValue改為'a'，視圖發生了改變?？梢?，完成了數據的雙向綁定。
![angular4自定義表單控件[(ngModel)]的實現](https://cache.yisu.com/upload/information/20200622/114/32294.gif)
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
