Angular中FormGroup是用来管理一组表单控件的,响应式表单使用FormArray来动态的管理表单控件,FormArray是不能独立使用的,必须跟在FormGroup下面,否则会出现错误。
1、类文件代码:
public form: FormGroup; // 构造函数中声明一个FormBuild对象 constructor(private _fb: FormBuilder) { }
接着的工作便是初始化form表单:
constructor(private _fb: FormBuilder) {
this.form = this._fb.group({
setting: this._fb.array([]),
});
}
这样就构建了一个嵌套了一个FormArray的FormFroup。
为了更便捷的获取到form中的setting项的数组,我们使用get方法来简化一下:
get settingFormArray() {
return this.form.controls['setting'] as FormArray;
}
-
使用push在FormArray中添加属性:
创建好setting项之后,我们需要在往setting项中添加字段:
ngOnInit(): void {
this.settingFormArray.push(
this._fb.group({
height: 0,
width: 0,
})
);
}
-
去掉form中的setting对某一个属性的控制:
在form中,当我们不需要某些字段的时候,我们就可以找到字段在数组中的下标,进行快速准确的删除。
this.addressFormArray.removAt(需要删除元素的下标)
- 类文件完整代码:
import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss'],
})
export class FormComponent implements OnInit {
public form: FormGroup;
get settingFormArray() {
return this.form.controls['setting'] as FormArray;
}
setting = {
height: 0,
width: 0,
};
Objectkeys = Object.keys;
constructor(private _fb: FormBuilder) {
this.form = this._fb.group({
setting: this._fb.array([]),
});
}
ngOnInit(): void {
this.settingFormArray.push(
this._fb.group({
height: 0,
width: 0,
})
);
}
delete(i: number) {
this.settingFormArray.removeAt(i);
}
submitForm() {}
}
2、模板中使用
<form [formGroup]="form">
<h3>默认设置项</h3>
<div formArrayName="setting">
<div *ngFor="let control of settingFormArray.controls; let i = index">
<div [formControlName]="i">
<div>
<label>高度</label>
<input nz-input placeholder="请输入高度" [(ngModel)]="setting['height']" formControlName="height" />
</div>
<div>
<label>宽度</label>
<input nz-input placeholder="请输入宽度" [(ngModel)]="setting['width']" formControlName="width" />
</div>
</div>
<button nz-button nzType="primary" style="margin-top: 10px;" (click)="delete(i)">删除</button>
</div>
</div>
</form>
简单的测试用例.png
网友评论