Angular 2反應性嵌套表格

Question

我有一個爲離子項目創建的嵌套表單，其中我有formGroups包含formArray，每個formArray有一個或多個formGroups本身。 保存數據的過程非常有效。我可以擁有儘可能多的FormArrays，並擁有儘可能多的FormGroups。

我的問題是當我試圖用保存的數據填充表單。我無法正確添加formArrays中的數據。

這是我編輯的腳本：

import { Component } from '@angular/core'; 
import { FormBuilder, FormControl, FormArray, FormGroup, Validators } from '@angular/forms'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { Todos } from '../../providers/todos'; 
import { HomePage } from '../home/home'; 
import { Patient } from '../../interfaces/patient.interface'; 

@Component({ 
    selector: 'page-edit', 
    templateUrl: 'edit.html' 
}) 
export class EditPage { 

    patient: any; 
    patientDate: any; 
    editTodoForm: FormGroup; 
    submitted: boolean; 
    events: any[] = []; 

    constructor(public navCtrl: NavController, public todoService: Todos, public navParams: NavParams, public formBuilder: FormBuilder) { 
    this.patient = this.navParams.data; 
    this.patientDate = new Date(this.patient.date).toISOString(); 
    this.editTodoForm = formBuilder.group({ 
     _id: [this.patient._id], 
     _rev: [this.patient._rev], 
     firstName: [this.patient.firstName, Validators.compose([Validators.pattern('[a-zA-Z ]*'), Validators.required])], 
     date: [this.patientDate], 
     botoxes: this.formBuilder.array([]), 
     acids: this.formBuilder.array([]) 
    }); 
    this.subcribeToFormChanges(); 
    this.addBotox(); 
    this.addAcid(); 

    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad EditPage'); 
    this.editTodoForm.setValue(this.patient); 
    } 

    initBotox() { 
    return this.formBuilder.group({ 
     botoxDate: [''], 
     botoxTypes: this.formBuilder.array([ 
     this.formBuilder.group({ 
      botoxType: [''], 
      botoxZone: [''], 
      botoxUnit: [''] 
     }) 
     ]) 
    }); 
    } 

    addBotox() { 
    const control = <FormArray>this.editTodoForm.controls['botoxes']; 
    const botoxCtrl = this.initBotox(); 
    if(this.patient.botoxes) { 
     this.patient.botoxes.forEach(botox => { 
     control.push(botoxCtrl); 
     }) 
    } else { 
     control.push(botoxCtrl); 
    } 

    } 

    removeBotox(i: number) { 
    const control = <FormArray>this.editTodoForm.controls['botoxes']; 
    control.removeAt(i); 
    } 

    initAcid() { 
    return this.formBuilder.group({ 
     acidDate: [''], 
     acidTypes: this.formBuilder.array([ 
     this.formBuilder.group({ 
      acidType: [''], 
      acidZone: [''], 
      acidUnit: [''] 
     }) 
     ]) 
    }); 
    } 

    addAcid() { 
    const control = <FormArray>this.editTodoForm.controls['acids']; 
    const acidCtrl = this.initAcid(); 

    control.push(acidCtrl); 
    } 

    removeAcid(i: number) { 
    const control = <FormArray>this.editTodoForm.controls['acids']; 
    control.removeAt(i); 
    } 

    subcribeToFormChanges() { 
     const myFormStatusChanges$ = this.editTodoForm.statusChanges; 
     const myFormValueChanges$ = this.editTodoForm.valueChanges; 

     myFormStatusChanges$.subscribe(x => this.events.push({ event: 'STATUS_CHANGED', object: x })); 
     myFormValueChanges$.subscribe(x => this.events.push({ event: 'VALUE_CHANGED', object: x })); 
    } 

    updateTodo(model: Patient, isValid: boolean) { 
    this.submitted = true; 
    this.todoService.updateTodo(this.editTodoForm.value); 
    this.navCtrl.setRoot(HomePage); 
    } 

} 

這是編輯HTML：

<ion-header no-border> 
    <ion-navbar color="primary"> 
    <ion-title>Editeaza pacient</ion-title> 
    </ion-navbar> 
</ion-header> 


<ion-content padding> 

    <form [formGroup]="editTodoForm" novalidate> 
    <div [hidden]="editTodoForm.controls.firstName.valid || (editTodoForm.controls.firstName.pristine && !submitted)" class="error-notification"> 
     Pacientul trebuie sa aiba cel putin un nume si un prenume 
    </div> 

    <ion-card> 
     <ion-card-header> 
     Date personale 
     </ion-card-header> 
     <ion-list padding> 
     <ion-item> 
      <ion-label stacked>Prenume pacient</ion-label> 
      <ion-input type="text" formControlName="firstName"></ion-input> 
     </ion-item> 
     <ion-item> 
      <ion-label stacked>Dată activitate</ion-label> 
      <ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MMMM YYYY" formControlName="date" 
      monthNames="ianuaie, februarie, martie, aprilie, mai, iunie, iulie, august, septembrie, octombrie, noiembrie, decembrie"></ion-datetime> 
     </ion-item> 
     </ion-list> 
    </ion-card> 

    <ion-card> 
     <ion-card-header> 
     Tratamente botox 
     </ion-card-header> 
     <ion-list padding> 
     <ion-card formArrayName="botoxes"> 
      <div *ngFor="let botox of editTodoForm.controls.botoxes.controls; let i=index"> 
      <p class="card-heading"> 
       <span>Tratament cu botox {{i + 1}}</span> 
       <button ion-button icon-only *ngIf="editTodoForm.controls.botoxes.controls.length > 1" (click)="removeBotox(i)" class="right-button remove-button"> 
     <ion-icon name="trash"></ion-icon> 
    </button> 
      </p> 
      <div [formGroupName]="i"> 
       <botoxInputs [group]="editTodoForm.controls.botoxes.controls[i]"></botoxInputs> 
      </div> 
      </div> 
     </ion-card> 
     <button (click)="addBotox()" ion-button icon-left> 
      <ion-icon name="add"></ion-icon> 
      Adauga tratament cu botox 
     </button> 
     </ion-list> 
    </ion-card> 

    <ion-card> 
     <ion-card-header> 
     Tratamente acid hialuronic 
     </ion-card-header> 
     <ion-list padding> 
     <ion-card formArrayName="acids"> 
      <div *ngFor="let acid of editTodoForm.controls.acids.controls; let i=index"> 
      <p class="card-heading"> 
       <span>Tratament cu acid hialuronic {{i + 1}}</span> 
       <button ion-button icon-only *ngIf="editTodoForm.controls.acids.controls.length > 1" (click)="removeAcid(i)" class="right-button remove-button"> 
     <ion-icon name="trash"></ion-icon> 
    </button> 
      </p> 
      <div [formGroupName]="i"> 
       <acidInputs [group]="editTodoForm.controls.acids.controls[i]"></acidInputs> 
      </div> 
      </div> 
     </ion-card> 
     <button (click)="addAcid()" ion-button icon-left> 
      <ion-icon name="add"></ion-icon> 
      Adauga tratament cu acid hialuronic 
     </button> 
     </ion-list> 
    </ion-card> 

    <div padding> 
     <button ion-button color="primary" block type="submit" (click)="createPatient(editTodoForm, editTodoForm.valid)">Salveaza date pacient</button> 
    </div> 


    </form> 


</ion-content> 

這是一個保存JSON我試圖重新添加到窗體的例子：

{ 
    "firstName": "Ionescu Ion", 
    "date": "2017-02-01T00:00:00.000Z", 
    "botoxes": [{ 
     "botoxDate": "2017-02-01", 
     "botoxTypes": [{ 
      "botoxType": "Xeomin 100UI", 
      "botoxZone": ["Frunte", "Crow feet", "Sprânceană"], 
      "botoxUnit": "111" 
     }, { 
      "botoxType": "Azzalure 50UI", 
      "botoxZone": ["Glabelar", "Intersprincenos", "Frunte"], 
      "botoxUnit": "222" 
     }] 
    }], 
    "acids": [{ 
     "acidDate": "2017-02-01", 
     "acidTypes": [{ 
      "acidType": "Juvederm Volift", 
      "acidZone": ["Periocular", "Tâmple"], 
      "acidUnit": "0.5 ml" 
     }] 
    }], 
    "_id": "0A418E81-CFD0-545B-B8DB-A326CECFC5F1", 
    "_rev": "3-f2914e24db5fac42930dba548f418cbd" 
} 

我的問題是，我只能得到e botoxType顯示的兩個botoxTypes。

我真的很感激任何幫助

Answer 1

對於任何與我有同樣問題的人。這就是我如何更改我的編輯腳本以在formArray上正確設置初始值：

import { Component } from '@angular/core'; 
import { FormBuilder, FormArray, FormGroup, Validators } from '@angular/forms'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { Todos } from '../../providers/todos'; 
import { HomePage } from '../home/home'; 
import { Patient } from '../../interfaces/patient.interface'; 

@Component({ 
    selector: 'page-edit', 
    templateUrl: 'edit.html' 
}) 
export class EditPage { 

    patient: any; 
    editTodoForm: FormGroup; 
    submitted: boolean; 
    events: any[] = []; 

    constructor(public navCtrl: NavController, public todoService: Todos, public navParams: NavParams, public formBuilder: FormBuilder) { 
    this.patient = this.navParams.data; 
    this.editTodoForm = formBuilder.group({ 
     _id: [this.patient._id], 
     _rev: [this.patient._rev], 
     firstName: ['', Validators.compose([Validators.pattern('[a-zA-Z ]*'), Validators.required])], 
     date: [''], 
     botoxes: this.formBuilder.array([]), 
     acids: this.formBuilder.array([]) 
    }); 
    this.subcribeToFormChanges(); 
    if(this.patient.botoxes.length > 0) { 
     this.patient.botoxes.forEach(botox => { 
     let btys = botox.botoxTypes.length; 
     this.addBotox(btys); 
     }); 
    } else { 
     this.addBotox(1); 
    } 
    if(this.patient.acids.length > 0) { 
     this.patient.acids.forEach(acid => { 
     let atys = acid.acidTypes.length; 
     this.addAcid(atys); 
     }); 
    } else { 
     this.addAcid(1); 
    } 

    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad EditPage'); 
    const value: Patient = this.navParams.data; 
    (<FormGroup>this.editTodoForm).patchValue(value, { onlySelf: true }); 
    } 

    initBotox(number) { 
    return this.formBuilder.group({ 
     botoxDate: [''], 
     botoxTypes: this.addBotoxTypes(number) 
    }); 
    } 

    initBotoxTypes() { 
     return this.formBuilder.group({ 
     botoxType: [''], 
     botoxZone: [''], 
     botoxUnit: [''] 
     }); 
    } 


    addBotoxTypes(number) { 
    let bts = new FormArray([]); 
    for(let i = 0; i < number; i++) { 
     bts.push(this.initBotoxTypes()) 
    } 
    return bts; 
    } 

    addBotox(number) { 
    const control = <FormArray>this.editTodoForm.controls['botoxes']; 
    const botoxCtrl = this.initBotox(number); 
    control.push(botoxCtrl); 
    } 

    removeBotox(i: number) { 
    const control = <FormArray>this.editTodoForm.controls['botoxes']; 
    control.removeAt(i); 
    } 

    initAcid(number) { 
    return this.formBuilder.group({ 
     acidDate: [''], 
     acidTypes: this.addAcidTypes(number) 
    }); 
    } 

    initAcidTypes() { 
     return this.formBuilder.group({ 
     acidType: [''], 
     acidZone: [''], 
     acidUnit: [''] 
     }); 
    } 


    addAcidTypes(number) { 
    let acs = new FormArray([]); 
    for(let i = 0; i < number; i++) { 
     acs.push(this.initAcidTypes()) 
    } 
    return acs; 
    } 

    addAcid(number) { 
    const control = <FormArray>this.editTodoForm.controls['acids']; 
    const acidCtrl = this.initAcid(number); 

    control.push(acidCtrl); 
    } 

    removeAcid(i: number) { 
    const control = <FormArray>this.editTodoForm.controls['acids']; 
    control.removeAt(i); 
    } 

    subcribeToFormChanges() { 
     const myFormStatusChanges$ = this.editTodoForm.statusChanges; 
     const myFormValueChanges$ = this.editTodoForm.valueChanges; 

     myFormStatusChanges$.subscribe(x => this.events.push({ event: 'STATUS_CHANGED', object: x })); 
     myFormValueChanges$.subscribe(x => this.events.push({ event: 'VALUE_CHANGED', object: x })); 
    } 

    updateTodo(model: Patient, isValid: boolean) { 
    this.submitted = true; 
    this.todoService.updateTodo(this.editTodoForm.value); 
    this.navCtrl.setRoot(HomePage); 
    } 

}