如何重置點擊父母的按鈕點擊數據和查看兒童輸入？

Question

在我們Angular 4 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>

<parent-component>的是這樣的：

<form [formGroup]="myGroup" #f="ngForm" name="parent-component" (submit)="resetForm(f)" >  
    <input name="abc" id="abc" formControlName="abc">  
    <level-1-child [formGroup]="myGroup"></level-1-child>  
    <input type="submit" value="Reset form"> 
</form> 

而且<level-1-child>樣子這個：

<input name="abc" id="abc" formControlName="abc">  
<level-2-child [formGroup]="myGroup"> 
</level-2-child> 

而且<level-2-child>看起來是這樣的：

<div [formGroup]="myGroup"> 
    <textarea formControlName="abc" id="abc" name="abc" [(ngModel)]="level-2-child.txt" > 
    </textarea> 
</div> 

的parent-component.ts代碼，level-1-child.ts & level-2-child.ts是以下行：

import { Component, OnInit } from '@angular/core'; 
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms'; 

@Component({ 
    moduleId: module.id, 
    selector: 'parent-component', //level-1-child, level-2-child 
    templateUrl: 'parent-component.html' //level-1-child, level-2-child 
}) 

export class ParentComponent { //Level1Child, Level2Child 
    myGroup = new FormGroup({abc: new FormControl()}); 
} 

This code is only resetting the input#abc of <parent-component> . What is the fix for this?

我們試圖使遠？

作爲每@StepanZarubin的suggestion試過溶液1

，所述parent-component.ts是這樣的：

resetForm(f) {  
    f.resetForm();  
} 

與模板<parent-component>這樣的：

<form #f="ngForm" (submit)="resetForm(f)" > 
    <level-1-child> 
    <level-2-child> 
     <level-3-child> 
     ... 
      <level-n-child> 
      </level-n-child> 
     ... 
     </level-3-child> 
    </level-2-child> 
    </level-1-child> 
    <button type="submit"> Submit </button> 
</form> 

的<level-n-child>模板是：

<input name="inp" id="inp" #inpField="ngModel" [(ngModel)]="childModel.inp"> 

但是，由於某些原因，這不是重置<level-n-child>的input#inp元素。

試圖解決2

• 我們不希望使用boolean value sent to the child

試圖解決3

• 使用stuff like [parentFormGroup]是導致錯誤：

Can't bind to 'parentFormGroup' since it isn't a known property of 'level-n-child'

試圖解決使用REACTIVE_FORM_DIRECTIVES此錯誤時拋出另一個錯誤：

[ts] Module '"node_modules/@angular/forms/forms"' has no exported member 'REACTIVE_FORM_DIRECTIVES'.

然而，we're already using the latest這不是主要問題。

試過溶液4

• 好像input is the solution, however since there are lot of components - we're not considering this suggestion

試過溶液5

• The names are distinct, so this suggestion is out of scope

可能的解決方法

• @PaulParton在談論form group，我們不知道，這就是如果這是正確的解決與否。

我們不希望在這些組件上輸入/輸出很多雜亂的代碼。

有沒有辦法我們可以使用類似 共享服務這個？

Answer 1

來初始化「空」數據的形式，我做這樣的事情：

initializeProduct(): IProduct { 
    // Return an initialized object 
    return { 
     id: 0, 
     productName: null, 
     productCode: null, 
     tags: [''], 
     releaseDate: null, 
     price: null, 
     description: null, 
     starRating: null, 
     imageUrl: null 
    }; 
} 

，然後綁定到初始化產品。

你可以在這裏找到一個完整的例子：https://github.com/DeborahK/Angular2-ReactiveForms（特別是APM文件夾）。

該代碼可用於在Pluralsight我的「角無形式」當然，如果你想看到它是如何建造更多的細節：https://app.pluralsight.com/library/courses/angular-2-reactive-forms/table-of-contents