จัดการ array ของ FormGroup ด้วย FormArray ใน Reactive Form

import { Component, Input, OnChanges } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

this.staffForm = this.fb.group({// <-- the parent FormGroup
  name: ['',Validators.required], 
  education: this.fb.group(new Education()),
  age: '',
  gender: '',
  vacation: '' 
});

education: this.fb.group(new Education()),

  setEducation(educations:Education[]){
    const educationFGs = educations.map(education => this.fb.group(education));
    const educationFormArray = this.fb.array(educationFGs);
    this.staffForm.setControl('academics', educationFormArray);
  }

var a = [1,2,3]; // a คือตัวแปร array
var b = a.map(ฟังก์ชั่นทำคำสั่งวนลูปค่าตัวแปร a); // ตัวแปร b จะมีค่าเท่ากับ 
// ค่าของตัวแปร a ทีวนลุปเรียกใช้ฟังก์ชั่น และคืนค่าออกมา 
// ตัวอย่างเช่น

var a = [1,2,3]; 
var b = a.map(
	function(x){
		return x*2;	
	}
);
// b = [2,4,6];
// หรือถ้าเขียนในรูปแบบ array function ใน ES6 จะได้เป็น
var b = a.map( x => x*2 );

const educationFGs = educations.map(education => this.fb.group(education));

const educationFGs = educations.map(
	function(education){
		return this.fb.group(education);
	}
);

const educationFormArray = this.fb.array(educationFGs);

this.staffForm.setControl('academics', educationFormArray);

  get academics(): FormArray {
    return this.staffForm.get('academics') as FormArray;
  };

export class StaffDetailComponent{
  @Input() staff:Staff;
  
  staffForm: FormGroup; 
  degrees = degrees;

  constructor(private fb: FormBuilder) { 
    this.createForm();
  }
   
  createForm() {
    this.staffForm = this.fb.group({// <-- the parent FormGroup
      name: ['',Validators.required], 
      academics: this.fb.array([]), // <-- academics as an empty FormArray
      age: '',
      gender: '',
      vacation: '' 
    });
  }    

  ngOnChanges(staff: Staff){
    this.staffForm.reset({
      name:    this.staff.name,
      age:this.staff.age,
      gender:this.staff.gender,
      vacation:this.staff.vacation
    });
    this.setEducation(this.staff.education);
  }

  setEducation(educations:Education[]){
    const educationFGs = educations.map(education => this.fb.group(education));
    const educationFormArray = this.fb.array(educationFGs);
    this.staffForm.setControl('academics', educationFormArray);
  }
  get academics(): FormArray {
    return this.staffForm.get('academics') as FormArray;
  };  

}

<div formArrayName="academics"  class="well well-lg">
<!-- education template -->
</div>

<div formArrayName="academics"  class="well well-lg">
    <div *ngFor="let education of academics.controls; let i=index" [formGroupName]="i" >
    <!-- The repeated education template -->
    </div>
</div>

<div formArrayName="academics"  class="well well-lg">
    <div *ngFor="let education of academics.controls; let i=index" [formGroupName]="i" >   
      <!-- The repeated education template -->
      <h4>Education #{{i + 1}}</h4>
      <div class="form-group">
        <label class="center-block">Degree:
          <select class="form-control" formControlName="degree">
              <option *ngFor="let degree of degrees" [value]="degree">{{degree}}</option>
          </select>
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">Discipline:
          <input class="form-control" formControlName="discipline">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">Year:
          <input class="form-control" formControlName="year">
        </label>
      </div>      
    </div>
</div>

Form value: {
  "name": "Manop",
  "age": 27,
  "gender": "male",
  "vacation": false,
  "academics": [
    {
      "degree": "Master",
      "discipline": "MBA",
      "year": "2017"
    },
    {
      "degree": "Bachelor",
      "discipline": "Engeering",
      "year": "2014"
    }
  ]
}

Form value: {
  "name": "Jubjang",
  "age": 30,
  "gender": "female",
  "vacation": true,
  "academics": [
    {
      "degree": "Bachelor",
      "discipline": "Accounting",
      "year": "2008"
    }
  ]
}

  addAcademic() {
    this.academics.push(this.fb.group(new Education()));
  }

<button (click)="addAcademic()" type="button">Add an Education</button>

  removeAcademic(i:number) {
    this.academics.removeAt(i);
  }

<button (click)="removeAcademic(i)" type="button">Remove Education</button>

  nameChangeLog: string[] = [];
  logNameChange() {
    const nameControl = this.staffForm.get('name');
    nameControl.valueChanges.forEach(
      (value: string) => this.nameChangeLog.push(value)
    );
  }  
  
  constructor(private fb: FormBuilder) { 
    this.createForm();
    this.logNameChange();
  }

<div>{{ this.staffForm.get("name").value }} </div>

<h2>Staff Detail</h2>
<h3><i>A FormGroup with multiple FormControls</i></h3>
<form [formGroup]="staffForm" (ngSubmit)="onSubmit()" novalidate>
  <div style="margin-bottom: 1em">
    <button type="submit"
            [disabled]="staffForm.pristine" class="btn btn-success">Save</button> &nbsp;
    <button type="reset" (click)="revert()"
            [disabled]="staffForm.pristine" class="btn btn-danger">Revert</button>
  </div>  
  <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
<div formArrayName="academics"  class="well well-lg">
    <div *ngFor="let education of academics.controls; let i=index" [formGroupName]="i" >   
      <!-- The repeated education template -->
      <h4>Education #{{i + 1}}</h4>
      <div class="form-group">
        <label class="center-block">Degree:
          <select class="form-control" formControlName="degree">
              <option *ngFor="let degree of degrees" [value]="degree">{{degree}}</option>
          </select>
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">Discipline:
          <input class="form-control" formControlName="discipline">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">Year:
          <input class="form-control" formControlName="year">
        </label>
      </div>    
      <button (click)="removeAcademic(i)" type="button">Remove Education</button>  
    </div>
    <button (click)="addAcademic()" type="button">Add an Education</button>
</div>  
  <div class="form-group">
    <label class="center-block">Age:
      <input class="form-control" formControlName="age">
    </label>
  </div>   
  <div class="form-group radio">
    <h4>Gender:</h4>
    <label class="center-block"><input type="radio" formControlName="gender" value="male">Male</label>
    <label class="center-block"><input type="radio" formControlName="gender" value="female">Female</label>
  </div>  
  <div class="checkbox">
    <label class="center-block">
      <input type="checkbox" formControlName="vacation">I have a vacation.
    </label>
  </div>       
</form>
<p>Form value: {{ staffForm.value | json }}</p>
<p>Form status: {{ staffForm.status | json }}</p>
<div>{{ this.staffForm.get("name").value }} </div>
<h4>Name change log</h4>
<div *ngFor="let name of nameChangeLog">{{name}}</div>

[disabled]="staffForm.pristine" 

  onSubmit() {
    this.staff = this.prepareSaveStaff();
    console.log(this.staff);
    // คำสั่งที่จะเอาค่า this.staff ไปใช้งาน
    this.ngOnChanges(this.staff);
  }

  prepareSaveStaff(): Staff {
    const formModel = this.staffForm.value;

    const academicsDeepCopy: Education[] = formModel.academics.map(
      (education: Education) => Object.assign({}, education)
    );

    const saveStaff: Staff = {
      id: this.staff.id as number,
      name: formModel.name as string,
      age: formModel.age as number,
      gender:formModel.gender as string,
      vacation:formModel.vacation as boolean,
      education: academicsDeepCopy
    };
    return saveStaff;
  }

const formModel = this.staffForm.value;

    const academicsDeepCopy: Education[] = formModel.academics.map(
      (education: Education) => Object.assign({}, education)
    );

    const saveStaff: Staff = {
      id: this.staff.id as number,
      name: formModel.name as string,
      age: formModel.age as number,
      gender:formModel.gender as string,
      vacation:formModel.vacation as boolean,
      education: academicsDeepCopy
    };
    return saveStaff;

revert() { this.ngOnChanges(null); }

import { Component, Input, OnChanges } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Education, Staff, degrees } from './data-model';

@Component({
  selector: 'staff-detail',
  templateUrl:'/app/components/staff-detail.component.html'
})
export class StaffDetailComponent{
  @Input() staff:Staff;
  
  staffForm: FormGroup; 
  degrees = degrees;

  nameChangeLog: string[] = [];
  logNameChange() {
    const nameControl = this.staffForm.get('name');
    nameControl.valueChanges.forEach(
      (value: string) => this.nameChangeLog.push(value)
    );
  }  

  constructor(private fb: FormBuilder) { 
    this.createForm();
    this.logNameChange();
  }
   
  createForm() {
    this.staffForm = this.fb.group({// <-- the parent FormGroup
      name: ['',Validators.required], 
      academics: this.fb.array([]), // <-- academics as an empty FormArray
      age: '',
      gender: '',
      vacation: '' 
    });
  }    

  ngOnChanges(staff: Staff){
    this.staffForm.reset({
      name:    this.staff.name,
      age:this.staff.age,
      gender:this.staff.gender,
      vacation:this.staff.vacation
    });
    this.setEducation(this.staff.education);
  }

  setEducation(educations:Education[]){
    const educationFGs = educations.map(education => this.fb.group(education));
    const educationFormArray = this.fb.array(educationFGs);
    this.staffForm.setControl('academics', educationFormArray);
  }
  get academics(): FormArray {
    return this.staffForm.get('academics') as FormArray;
  };  

  addAcademic() {
    this.academics.push(this.fb.group(new Education()));
  }

  removeAcademic(i:number) {
    this.academics.removeAt(i);
  }

  prepareSaveStaff(): Staff {
    const formModel = this.staffForm.value;

    const academicsDeepCopy: Education[] = formModel.academics.map(
      (education: Education) => Object.assign({}, education)
    );

    const saveStaff: Staff = {
      id: this.staff.id as number,
      name: formModel.name as string,
      age: formModel.age as number,
      gender:formModel.gender as string,
      vacation:formModel.vacation as boolean,
      education: academicsDeepCopy
    };
    return saveStaff;
  }

  onSubmit() {
    this.staff = this.prepareSaveStaff();
    console.log(this.staff);
    // คำสั่งที่จะเอาค่า this.staff ไปใช้งาน
    this.ngOnChanges(this.staff);
  }

  revert() { this.ngOnChanges(null); }

}