将模型更改注册到MDL输入元素

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-tab：

<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">

原始答案：

对于我的项目，我的临时解决方案是放入一些非常非角度的代码：

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');
    });
}