如何在自定義組件中使用ngModel搂漠?

網(wǎng)址:https://embed.plnkr.co/nqKUSPWb6w5QXr8a0wEu/?show=preview

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

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true
};

@Component({
    selector: 'custom-input',
    template: `<div class="form-group">
                    <label><ng-content></ng-content>
                        <input [(ngModel)]="value"  
                                class="form-control" 
                                (blur)="onBlur()" >
                    </label>
                </div>`,
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor {

    //The internal data model
    private innerValue: any = '';

    //Placeholders for the callbacks which are later provided
    //by the Control Value Accessor
    private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

    //get accessor
    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

    //Set touched on blur
    onBlur() {
        this.onTouchedCallback();
    }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }

    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }

}

使用

//our root app component
import {Component} from '@angular/core'

@Component({
    selector: 'demo-app',
    template: `
        <p><span class="boldspan">Form data:</span>{{demoForm.value | json}}</p>
        <p><span class="boldspan">Model data:</span> {{dataModel}}</p>
        <form #demoForm="ngForm">
          <custom-input name="someValue" 
                          [(ngModel)]="dataModel">
              Write in this wrapper control:
          </custom-input>
        </form>`
})
export class AppComponent {
    dataModel: string = '';
}

原理:

  • 需要繼承ControlValueAccessor 审葬。
  • writeValue用來獲取ngModel的值野揪,onChangeCallback 用來將ngModel的值傳出吓坚。每次改變value時(shí)都要觸發(fā)這個(gè)函數(shù)寄疏。
  • 注意當(dāng)ngmodel傳入的值沒有改變時(shí)是牢,不會(huì)觸發(fā)writeValue僵井。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市驳棱,隨后出現(xiàn)的幾起案子批什,更是在濱河造成了極大的恐慌,老刑警劉巖蹈胡,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件渊季,死亡現(xiàn)場(chǎng)離奇詭異朋蔫,居然都是意外死亡罚渐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門驯妄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來荷并,“玉大人,你說我怎么就攤上這事青扔≡粗” “怎么了?”我有些...
    開封第一講書人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵微猖,是天一觀的道長(zhǎng)谈息。 經(jīng)常有香客問我,道長(zhǎng)凛剥,這世上最難降的妖魔是什么侠仇? 我笑而不...
    開封第一講書人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮犁珠,結(jié)果婚禮上逻炊,老公的妹妹穿的比我還像新娘。我一直安慰自己犁享,他們只是感情好余素,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著炊昆,像睡著了一般桨吊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上凤巨,一...
    開封第一講書人閱讀 51,482評(píng)論 1 302
  • 那天视乐,我揣著相機(jī)與錄音,去河邊找鬼磅甩。 笑死炊林,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的卷要。 我是一名探鬼主播渣聚,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼独榴,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了奕枝?” 一聲冷哼從身側(cè)響起棺榔,我...
    開封第一講書人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎隘道,沒想到半個(gè)月后症歇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谭梗,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年忘晤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片激捏。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡设塔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出远舅,到底是詐尸還是另有隱情闰蛔,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布图柏,位于F島的核電站序六,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏蚤吹。R本人自食惡果不足惜例诀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望距辆。 院中可真熱鬧余佃,春花似錦、人聲如沸跨算。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽诸蚕。三九已至步势,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間背犯,已是汗流浹背坏瘩。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留漠魏,地道東北人倔矾。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親哪自。 傳聞我的和親對(duì)象是個(gè)殘疾皇子丰包,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)壤巷,斷路器邑彪,智...
    卡卡羅2017閱讀 134,656評(píng)論 18 139
  • Lua 5.1 參考手冊(cè) by Roberto Ierusalimschy, Luiz Henrique de F...
    蘇黎九歌閱讀 13,793評(píng)論 0 38
  • Vue.js是一個(gè)很優(yōu)秀的前端框架,熟練運(yùn)用可以幫助您快速搭建各種應(yīng)用胧华。如何理解Vue.js教程中的“使用自定義事...
    daling菜鳥閱讀 1,279評(píng)論 1 3
  • 今天晚上一起看了貝貝熊系列的《成績(jī)單大麻煩》寄症,小熊哥哥把時(shí)間都放在了體育上,所以得了一份很糟糕的成績(jī)單矩动,被憤怒的爸...
    銅豌豆xyn閱讀 391評(píng)論 2 1
  • 《論語》由孔子弟子及再傳弟子編寫而成有巧,至漢代成書。主要記錄孔子及其弟子的言行铅忿,這里面有不少是曾參的學(xué)生所記載的剪决。較...
    清心閣閱讀 210評(píng)論 0 0