继Angular学习笔记42:响应式表单:表单分组FormGroup-新建、获取FormGroup的值以后。
在UserInfo中还有属性是 Address,不过这个 Address属性 是由三个控件组成,分别是:area:地区;street:街道;houseId:门牌号。
这个时候,就涉及到了FormGroup嵌套。
将area:地区;street:街道;houseId:门牌号这三个进行分组,它们将是一个新的FormGroup,但是,这个FormGroup和之前一些FormControl是属于同一个表单中的。所以就要将这个Address嵌套到之前的ValidateFrom中。
修改类文件:
validateForm = new FormGroup({
name: new FormControl(null, [Validators.required]),
age: new FormControl(null, [Validators.required]),
email: new FormControl(null, [Validators.required]),
address: new FormGroup({
area: new FormControl(null, [Validators.required]),
street: new FormControl(null, [Validators.required]),
houseId: new FormControl(null, [Validators.required]),
})
});
修改模板文件:
<nz-divider [nzText]="'响应式表单'"></nz-divider>
<nz-content>
<form [formGroup]="validateForm" (ngSubmit)="handleSubmit()">
<nz-form-item>
<nz-form-label nzSpan="3" nz-col>
姓名
</nz-form-label>
<nz-form-control nzSpan="6" nz-col>
<input nz-input type="text" placeholder="请输入姓名~" formControlName="name">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="3" nz-col>
年龄
</nz-form-label>
<nz-form-control nzSpan="6" nz-col>
<input nz-input type="text" placeholder="请输入年龄~" formControlName="age">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="3" nz-col>
Email
</nz-form-label>
<nz-form-control nzSpan="6" nz-col>
<input nz-input type="text" placeholder="请输入Email~" formControlName="email">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="3" nz-col>address</nz-form-label>
<nz-form-control formGroupName="address" nzSpan="18" nz-col>
<nz-row>
<nz-form-control nzSpan="8" nz-col>
<input nz-input formControlName="area" placeholder="请输入地区">
</nz-form-control>
<nz-form-control nzSpan="8" nz-col>
<input nz-input formControlName="street" placeholder="请输入街道">
</nz-form-control>
<nz-form-control nzSpan="8" nz-col>
<input nz-input formControlName="houseId" placeholder="请输入门牌号">
</nz-form-control>
</nz-row>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<button type="submit" nz-button [disabled]="validateForm.invalid">提交表单</button>
</nz-form-item>
</form>
</nz-content>
<nz-content>
<nz-form-item>
<nz-form-label nzSpan="3" nz-col>
展示表单的值
</nz-form-label>
<nz-form-control nzSpan="6" nz-col>
{{validateForm.value | json }}
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzOffset="3" nzSpan="6">
<button nz-button (click)="handleInitForm()">重置</button>
</nz-form-control>
</nz-form-item>
</nz-content>
保存运行:就会发现之前的validateForm中增加了一个属性:address,不过这个属性不再是单纯的null,而是一个新的object,里面有area:地区;street:街道;houseId:门牌号,三个属性。