Matrici annidate in forms reattive angolari 2?

Ho usato il seguente tutorial per creare forms reattive in Angular 2 e funziona bene.

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Tuttavia, sto cercando di aggiungere una matrice all’interno di un array. Utilizzando il tutorial sopra, ho creato un modulo ‘Organizzazione’, che può contenere una serie di gruppi ‘Contatto’. Ma non sono in grado di adattare correttamente l’installazione per consentire a ciascun gruppo “Contatto” di contenere una serie di gruppi “Email”.

Non sono stato in grado di trovare un tutorial o un esempio che lo riguardi e sarei grato per qualsiasi suggerimento.

Utilizzando il tutorial sopra, ho creato un modulo ‘Organizzazione’, che può contenere una serie di gruppi ‘Contatto’. Ma non sono in grado di adattare correttamente l’installazione per consentire a ciascun gruppo “Contatto” di contenere una serie di gruppi “Email”.

Il tutorial sopra ti dà tutto ciò di cui hai bisogno.

Suppongo che tu voglia una struttura come questa.

inserisci la descrizione dell'immagine qui

In primo luogo è necessario un componente ( AppComponent nel mio caso) in cui dichiari FormGroup root. L’ho chiamato trustForm qui sotto.

app.component.ts

 export class AppComponent { trustForm: FormGroup; constructor(private fb: FormBuilder) { } ngOnInit() { this.trustForm = this.fb.group({ name: '', contracts: this.fb.array([]) }); this.addContract(); } initContract() { return this.fb.group({ name: '', emails: this.fb.array([]) }); } addContract() { const contractArray = this.trustForm.controls['contracts']; const newContract = this.initContract(); contractArray.push(newContract); } removeContract(idx: number) { const contractsArray = this.trustForm.controls['contracts']; contractsArray.removeAt(idx); } } 

In questo componente hai anche alcuni metodi che ti aiutano a manipolare il FormArray primo livello: i contracts

app.component.html

 

Add trust

Contract {{i + 1}}
Details
{{ trustForm.value | json }}

Non c’è nulla di diverso da root html dal tutorial tranne il diverso nome di FormArray .

Quindi è necessario creare un componente del contratto simile a AppComponent

contract.component.ts

 export class ContractComponent { @Input('group') contractGroup: FormGroup; constructor(private fb: FormBuilder) { } addEmail() { const emailArray = this.contractGroup.controls['emails']; const newEmail = this.initEmail(); emailArray.push(newEmail); } removeEmail(idx: number) { const emailArray = this.contractGroup.controls['emails']; emailArray.removeAt(idx); } initEmail() { return this.fb.group({ text: '' }); } } 

contract.component.html

 
Email {{i + 1}}

Come puoi vedere, sostituiamo semplicemente i contracts con le emails FormArray e stiamo passando anche FormGroup al componente email

E infine dovrai solo riempire EmailComponent con i campi desiderati.

email.component.ts

 export class EmailComponent { @Input('group') emailGroup: FormGroup; } 

email.component.html

 

Versione completata che puoi trovare su Plunker Example

Se pensi che questa soluzione non sembra corretta perché il componente principale contiene la descrizione del componente figlio come initContract e initEmails puoi dare un’occhiata a più complessi

Esempio di Plunker

dove ogni componente è responsabile della sua funzionalità.

Se stai cercando una soluzione per moduli basati su template leggi questo articolo:

  • Angolare: modulo guidato template annidato