1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Angular学习笔记43:响应式表单:FormGroup嵌套

Angular学习笔记43:响应式表单:FormGroup嵌套

时间:2021-03-07 13:17:33

相关推荐

Angular学习笔记43:响应式表单:FormGroup嵌套

继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:门牌号,三个属性。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。