简体   繁体   English

如何在Angular 2中保存FormArray控件?

[英]How can I save my FormArray controls in Angular 2?

I am used contains FormArray to do something. 我习惯于包含FormArray做某事。 And the component.ts is below: 而且component.ts如下:

export class AlumniInfoComponent implements OnInit{
    eduFormGroup: FormGroup;
    socialFormGroup: FormGroup;
    alumniActsFormGroup: FormGroup;

    education: FormArray = new FormArray([]);

    constructor(private _formBuilder: FormBuilder, private 
                alumniService: AlumniInfoService) {}

    ngOnInit() {

         this.eduFormGroup = this._formBuilder.group({
             name: new FormControl('', Validators.required),
             birthPlace: new FormControl('', Validators.required),
             gender: new FormControl('', Validators.required),
             education: this.education,
          });   
      .....   
}
    addEducation() {

    (<FormArray>this.eduFormGroup.controls['education']).push(
        this._formBuilder.group({
        registrationTime: new FormControl(),
        graduationTime: new FormControl(),
        major: new FormControl('', Validators.required),
        faculty: new FormControl(),
        educationBackground: new FormControl(),
        academicDegree: new FormControl(),
      })
    );
  }

} and .html code is below: }和.html代码如下:

<mat-vertical-stepper  #stepper>
     <mat-step [stepControl]="eduFormGroup">
         <form [formGroup]="eduFormGroup">
            <div>
                 <button mat-button class="circular ui icon button" 
                    (click)="addEducation()">
                     Add<mat-icon>add_circle_outline</mat-icon>
                 </button>
                  <ul class="list-group" formArrayName="education">
                     <div *ngFor="let education of 
                       eduFormGroup.controls['education'].controls; let 
                       i = index">
                          <div class="edu-class" formGroupName={{i}}>
                              <mat-form-field class="basic-info">
                                  <input
                                   matInput
                                   type="Date"
                                   formControlName="registrationTime"
                                   placeholder="registrationTime">

                              </mat-form-field>
                        </div>
                     </div>
                   </ul>
            </div>
         </form>
     </mat-step>

</mat-vertical-stepper>

When I want to hit post api to server, how can I add entire FormArray controls to post method, I means how to iterate these controls inside FormArray in, for example saveEduFormData method which save the eduFormGroup data to server, method to save these data to server? 当我想将api发送到服务器时,如何将整个FormArray控件添加到post方法中,这意味着如何在FormArray中迭代这些控件,例如,将eduFormGroup数据保存到服务器的saveEduFormData方法,以及将这些数据保存到的方法。服务器?

我认为this.eduFormGroup.controls['education'].value包含您需要的内容。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM