预填充的MDL文本字段导致Angular2出现问题

Question

我正在使用纯MDL和Angular2进行项目,但我遇到了textfields和ngModel的问题.

当角度组件为模型中使用的对象设置一些值时,MDL组件不会正确运行脏和有效性检查,我认为这是因为它不需要触发所需的事件.

这是输入代码:

<div class="mdl-textfield mdl-js-textfield">
    <input type="text" required class="mdl-textfield__input" id="field-sample" name="field-sample" [(ngModel)]="obj.name"></input>
    <label class="mdl-textfield__label" for="field-sample">Placeholder label</label>
</div>

这是创建组件后的结果:

请注意,输入有一个值(由角度组件提供),但占位符标签仍然在输入上,输入为红色,表示这是无效的.

经过一些研究,我开发了一个指令解决方案:

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

/**
 * Created to make MDL field validation and dirt check compatible with angular
 * Used in <input> and <textarea> tags
 */
@Directive({
    selector: '[mdl-textfield]'
})
export class MDLTextFieldDirective implements AfterViewChecked, AfterViewInit {

    constructor(private element: ElementRef) {
    }

    ngAfterViewInit() {
        componentHandler.upgradeAllRegistered();
    }

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

有没有人有另一个或更好的解决方案？