angular2：私は私のSettingsComponentでformbuilderで作成したフォームを持っている入力

Question

を無効なエラークラスを追加：私は今、何をしたいか

constructor(){ 
    this.userForm = this.formBuilder.group({ 
     'firstname': ['', Validators.required], 
     'lastname': ['', Validators.required], 
     'email': ['', Validators.compose([Validators.required, ValidationService.emailValidator])] 
    }); 
} 

値が有効でない場合、私の入力にクラスを追加しています。これは、次のエラーが生成さ

<label class="input" [ngClass]="{'state-error': lastname.valid}"> 
    <input ngControl="lastname" [(ngModel)]="user.lastname" id="lastname" #lastname="ngForm"/> 
</label> 
<small [hidden]="lastname.valid" class="form-required-field-info">this is a required field</small> 

：デモへ

Expression '{'state-error': lastname.valid} in SettingsComponent@60:57' has changed after it was checked. Previous value: 'null'. Current value: 'false'

リンク：私はこれを行うときにはhttps://plnkr.co/edit/WvycldydiuMsi8HwgIYc

を私は何をしないのですか？何かヒント？前もって感謝します！

Answer 1

モデルが好きではありませんlastname.validではなくngAfterViewInit()角度でモデルを変更することによって引き起こされていないが、ライフサイクルコールバックに変更されます。あなたは

ngAfterViewInit() { 
    this.user = {'lastname': 'test'}; 
    } 

エラーがなくなって

ngAfterViewInit() { 
    setTimeout(() => this.user = {'lastname': 'test'}); 
    } 

に変更した場合は

。ビューテンプレートを変更する必要はありません。

Plunker example

Answer 2

あなたはDEVモードで実行されていないことを確認してください。 devモードでは、ngViewInitの直後に変更検出が開始されると、このようなエラーが発生します。 （これはアウトコード内のエラーの可能性を識別するために、デベロッパーモードの正常な動作ですが、オープンバグ#6005があるにもかかわらず）

だから今のために、変化を検出して、自動的にすべての時間AにキックPRODモードを有効にします変化が起こる。

Answer 3

私は解決策を見つけたようです（私は思っています）。私がする必要があるのは、手動で変更を検出することです。そこで、Angle/CoreからChangeDetectorRefをインポートし、コンストラクタに挿入して、フォームデータをインポートした後、私はこれを行います：