登録モデルの変更

Question

フレームワークとMDLを統合する場合、フレームワークは、直接入力の値を設定しますが、それらはおそらくイベントをクリックして変更することがバインドされているよう変更は、MDLライブラリによって気づかれないであろう。例えば、私が持っている場合：その後、

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" id="joke" pattern="-?[0-9]*(\.[0-9]+)?"> 
    <label class="mdl-textfield__label" for="joke">Joke...</label> 
    <span class="mdl-textfield__error">Input is not a number!</span> 
</div> 

が、いくつかのJavaScriptを使用して値を変更します。

document.getElementById('joke').value=text; 

要素ラベルは移動せず、テキストで覆われています。要するに、is-dirtyクラスが設定されていません。ここで

は、より詳細に問題を示した例です。 https://plnkr.co/6pAh7ApQT8TUUS9G9QBg

私は現在Angular2でのプロジェクトに取り組んでいますが、私は、全体的な問題は、フレームワークに依存しないと思います。私は私の「答え」よりも、いくつかの優れたソリューションを願っています。

Answer 1

私はこのために見つけた最良の解決策は、ディレクティブを使用することです。要素に対してcheckDirty（）を呼び出すことができます。

import { Directive, AfterViewInit, ElementRef, AfterViewChecked} from '@angular/core'; 
declare var componentHandler: any; 

@Directive({ 
    selector: '[mdl]' 
}) 
export class MDL implements AfterViewInit { 
    constructor(private element: ElementRef) { 
    } 

    ngAfterViewInit() { 
     componentHandler.upgradeAllRegistered(); 
    } 

    ngAfterViewChecked() { 
     let mdlField = this.element.nativeElement.MaterialTextfield; 
     if (mdlField) { 
      mdlField.checkDirty(); 
      mdlField.checkValidity(); 
     } 
    } 
} 

次に、あなたのテンプレートで簡単にMDL入力の親のdivでこのディレクティブを含める

<div mdl class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--5-col mdl-cell--8-col-tablet mdl-cell--4-col-phone"> 
    <label class="mdl-textfield__label" for="promoCode_{{inRibbon}}">Promo code</label> 
    <input class="mdl-textfield__input" type="text" id="promoCode" name="promoCode_{{inRibbon}}" [ngModelOptions]="{standalone: true}" [(ngModel)]="itemAvailabilityRequest.promoCode"> 
</div> 

Answer 2

更新答え：

がクラスリストに結合し、https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass、より良い方法かもしれません：

例：

<div class="mdl-textfield mdl-js-textfield mdl-text-field--floating-label" 
    [class.is-dirty]=" val != null && val != '' "> 

またはMDL-タブの：

<div class="mdl-tabs__panel" 
    [class.is-active]="val_is_active_tab"> 

またはMDL-チェックボックス用：

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" 
     [class.is-checked]="val == 1"> 

オリジナルの答え：私のプロジェクトのために

私の一時ソリューションいくつかの非常に非angular2コードに入れていた：

private thingsToDirty = []; 
ngAfterViewChecked() { 
    for (let id of this.thingsToDirty) { 
     let el: any = document.getElementById(id); 
     if (el != undefined && 
     el.parentNode.className.indexOf("is-dirty") == -1) { 
      el.parentNode.className += " is-dirty"; 
     } 
    } 
    this.thingsToDirty.length = 0; 
} 

ngOnInit() { 
    this.something.getJSONfromServer().subscribe(data => { 
     this.thing = data; 
     this.thingsToDirty.push('thing_id'); 
    }); 
}