预填充的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();
        }
    }
}

有没有人有其他或更好的解决方案？