如何在 Angular 2 中保存我的 FormArray 控件?
How can I save my FormArray controls in Angular 2?
我是用包含FormArray来做的。 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(),
})
);
}
}
和 .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>
当我想post api 到服务器时,如何将整个FormArray 控件添加到post 方法中,我的意思是如何在FormArray 中迭代这些控件,对于将 eduFormGroup 数据保存到服务器的示例 saveEduFormData 方法,将这些数据保存到服务器的方法?
我认为 this.eduFormGroup.controls['education'].value
包含您需要的内容。
我是用包含FormArray来做的。 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(),
})
);
}
} 和 .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>
当我想post api 到服务器时,如何将整个FormArray 控件添加到post 方法中,我的意思是如何在FormArray 中迭代这些控件,对于将 eduFormGroup 数据保存到服务器的示例 saveEduFormData 方法,将这些数据保存到服务器的方法?
我认为 this.eduFormGroup.controls['education'].value
包含您需要的内容。