Angular2カスタムコンポーネント - 元のままとしてマーク

Question

多くの標準コントロール（<input>, <select>など）を含むAngular 2.1のテンプレート駆動型と、複数の入力要素を含むカスタムコントロールがあります。

カスタムコントロールでControlValueAccessorを実装しましたが、親フォームに変更/タッチ/有効な値を正しく伝播しています。

save(myForm: NgForm) { 

    myForm.form.markAsPristine(); 
    myForm.form.markAsUntouched(); 

} 

これは次のとおりです。ただし

...親フォームに私は、どの保存した後、私はこのような（これは適用されたCSSに影響を与える）汚れ/触れた状態をクリアするには、[保存]ボタンを持っていますトップレベルの親フォームとカスタムコントロール内のすべての要素に対して正常に動作していますでも<input>のカスタムコントロール内のフィールドは、まだ触れられていない/汚れているとマークされています。

ダーティー/タッチ状態が変更されたときにカスタムコントロールに通知することができるので、一致する子の<input>要素をクリアできるようになりますか？ <input>要素がカスタムコントロール内にある場合、親フォームのmarkAsPristine/Untouchedの呼び出しによって更新されないようです。

ありがとうございます！

Answer 1

は、上記のコードは唯一のフォームコントロールのために動作しますcontrols['nameOfControl']

このような

myForm.form.controls['nameOfControl'].markAsPristine(); 

を追加してください。

次は、周りの良い仕事のようだ：

active = true; 
    newModel() { 
    this.model = new yourModel(2, '',true, ''); 
    this.active = false; 
    setTimeout(() => this.active = true, 0); 
    } 

は新しいモデルでフォームをリセットして、「自然のまま」クラスの状態を復元します。 'アクティブ'フラグをトグルすると、フォームはNgIf経由でティックで削除/再追加されます。彼らは:)

を修正することができまで、はい、それは周りの小さな仕事であるアクティブフラグと

Answer 2

回避策を助け希望は仕事をしていませんが、私はまた、別の方法を発見しました。

親フォームでは、カスタムチャイルドコンポーネントにViewChildとしてアクセスできます。親フォームで

すなわち：私は親フォームに保存するとき

@ViewChild(CustomChildComponent) child1: CustomChildComponent; 

はその後、直接その子を呼び出します。 （あるmyForm：NgForm）保存

{

// clear anything at the parent form level 
myForm.form.markAsPristine(); 
myForm.form.markAsUntouched(); 

// tell the custom component to do the same 
this.child1.markAsPristineAndUntouched(); 

}

CustomChildComponentに私は を定義した

..

// get the input controls in the the child that we want to clear 
@ViewChild('surname') surnameField: NgModel; 

markAsPristineAndUntouched() { 

    this.surnameField.control.markAsPristine(); 
    this.surnameField.control.markAsUntouched(); 
    // .. clear other controls .. 
}