角2個組件和驗證

我試圖實現與角2，我已經看到了帖子驗證嵌套形式，並遵循文檔，但我真的很掙扎，嵌套表格希望你能指出我在正確的方向。角2個組件和驗證

我所試圖實現的是具有多個子組件生效的形式。這些兒童組件有點複雜，其中一些兒童組件更多，但爲了這個問題，我認爲我們可以攻擊父母和孩子的問題。

我是什麼試圖完成

有了這樣的工作原理是這樣一種形式：

<div [formGroup]="userForm" novalidate> 
    <div> 
     <label>User Id</label> 
     <input formControlName="userId"> 
    </div> 
    <div> 
     <label>Dummy</label> 
     <input formControlName="dummyInput"> 
    </div> 
</div>

這需要有這樣一類：

private userForm: FormGroup; 
constructor(private fb: FormBuilder){ 
    this.createForm(); 
} 
private createForm(): void{ 
    this.userForm = this.fb.group({ 
     userId: ["", Validators.required], 
     dummyInput: "", Validators.required] 
    }); 
}

可正常工作，但現在我想解耦代碼，並將「dummyInput」功能放在單獨的不同組件中。這是我迷路的地方。這是我試過了，我覺得我不遠處也得到了答案，但我真的沒了主意，我是相當新的場景：

parent.component.html

<div [formGroup]="userForm" novalidate> 
    <div> 
     <label>User Id</label> 
     <input formControlName="userId"> 
    </div> 
    <div> 
     <dummy></dummy> 
    </div> 
</div>

parent.component.ts

private createForm(): void{ 
    this.userForm = this.fb.group({ 
    userId: ["", Validators.required], 
    dummy: this.fb.group({ 
     dummyInput: ["", Validators.required] 
    }) 
});

children.component.html

<div [formGroup]="dummyGroup"> 
    <label>Dummy Input: </label> 
    <input formControlName="dummyInput"> 
</div>

children.component.ts

private dummyGroup: FormGroup;

我知道的東西是不正確的代碼，但我真的在一個路障。任何幫助將被誇大。

謝謝。

來源

2017-06-07 Mese

的可能的複製[角2：形成包含子組件（https://stackoverflow.com/questions/40172270/angular-2-form-containing-child-component） – Alex

不會撒謊，不知道我怎麼沒發現這個帖子較早。

Angular 2: Form containing child component

的解決方案是將兒童組件綁定到同一formGroup，通過從父傳遞formGroup給孩子作爲輸入。

如果有人分享一段代碼來解決其他方式的問題，我會很樂意接受它。

來源

2017-06-07 09:51:56 Mese

，你可以在你的孩子組件添加輸入傳遞FormGroup到it.and使用FormGroupName通過您FormGroup :)的名稱

children.component.ts

@Input('group'); 
private dummyGroup: FormGroup;

parent.component。HTML

<div [formGroup]="userForm" novalidate> 
    <div> 
     <label>User Id</label> 
     <input formControlName="userId"> 
    </div> 
    <div formGroupName="dummy"> 
     <dummy [group]="userForm.controls['dummy']"></dummy> 
    </div> 
</div>

來源

2017-06-07 10:01:29

相關：HTTPS： //sackoverflow.com/questions/40172270/angular-2-form-containing-child-component – Mese

這部分：[group] =「userForm.controls ['dummy']」是解決方案所在之處。我輸了一天試圖找到解決這個問題的方法，將一個組傳遞給一個子組件。我有一個ngFor。 Tee最終代碼如下所示：[group] =「formGroup.controls ['section'+ section.SectionId]」 –

角2個組件和驗證

回答

相關問題