重置父母的形式子組件的輸入字段提交

Question

這不是一個調試的問題，我們正在尋找有關該問題的最佳解決方案的概念指導

在我們Angular 2 app，我們」已經一個

• <parent-component>具有<form>
• 的<form>具有<level-1-child>
• 的<level-1-child>有<level-2-child>
• 的<level-2-child>有<textarea>

我們需要做什麼？

• 復位<parent-component>的<form>元素，<level-1-child> & <level-2-child>上<button>點擊或提交<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> 

然後，只需添加@Input() val: any到level-1和level-2組件。

所以，當你「重置」你的myVal對象重置爲初始值。這對兒童也會生效。

旁註：我不確定是否必須更新對象引用以使其生效，但是您可以在需要時使用this.myVal = Object.assign({}, this.myVal)來執行此操作。

你也應該叫resetForm在<form>標籤，當您提交。因此，像：

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

@ViewChild('form') form; 

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

編輯：

隨着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()。