リセット入力フィールドには、これは、デバッグの問題ではありません

Question

を提出我々はAngular 2 appで問題

ための最善の解決策の概念のガイダンスを探している、私たちは」 VEの<form>

<form>を持っている

• <parent-component><level-1-child>
を持っています
• <level-1-child>は<level-2-child>
• <level-2-child>は、私たちが行う必要がある何<textarea>

を持っていましたか？ <parent-component>の<form>要素をリセット

• 、<button>クリックで<level-1-child> & <level-2-child>または<parent-component>の<form>

ここでの提出はissue re-producible

Answer 1

FormBuilderがなければ、それは実際のリセットを行うことが難しくなっていますしかし、あなたは次のようにすることができます：

親コンポーネント：

<form> 
    <level-1 [val]="myVal"></level-1> 
</form> 

レベル1：

<level-2 [val]="val"></level-2> 

レベル2：

<textarea [(ngModel)]="val.someProp"></textarea> 

単にlevel-1とlevel-2コンポーネントに@Input() val: anyを加えます。

「リセット」するとmyValオブジェクトが元の値にリセットされます。これは子供たちにも同様に有効です。

サイドノート：オブジェクト参照を有効にするためにオブジェクト参照を更新する必要があるかどうかは分かりませんが、必要な場合はthis.myVal = Object.assign({}, this.myVal)でそれを行うことができます。

<form>タグにはresetFormもお電話する必要があります。だから、何かのように：

<form #form="ngForm" (ngSubmit)="save()"></form> 

@ViewChild('form') form; 

save(): void { 
    this.form.resetForm() 
} 

EDIT：FormBuilderで

は、あなたがしたい：

親コンポーネント：

public form: FormGroup = this.fb.group({ 
    someProp: '' 
}); 

<form [formGroup]="form"> 
    <level-1 [val]="form"></level-1> 
</form> 

レベル1：

<level-2 [val]="val"></level-2> 

を

レベル2：その後、

<div [formGroup]="val"> 
    <textarea formControlName="someProp"></textarea> 
</div> 

そしてthis.form.reset()でフォームをリセット。