【问题标题】:angular 4 form validation with reactive form not working带有反应形式的角度4表单验证不起作用
【发布时间】:2018-09-18 10:17:35
【问题描述】:
我是 Angular v4 的新手。我必须对表单进行验证。表单结构是有两个复选框,如果我选择第一个复选框,然后该表单的多个字段可以使用验证进行编辑,并且取消选中这些字段会禁用,第二个复选框也适用于相同的行为。这是页面的快照
如果单击一般信息复选框,则左侧的所有字段都应可通过验证进行编辑,如果取消选中则禁用所有字段,并且与地址复选框相同,如果它检查所有字段都应可通过验证进行编辑并打开取消选中使其禁用。
谢谢..
【问题讨论】:
标签:
angular
angularjs-directive
angular2-forms
angular4-forms
angular2-form-validation
【解决方案1】:
为一般信息和地址创建两个表单。
generalInfoForm = fb.group( (
'name' : [null, Validators.required],
'age' : [null, Validators.required] .... )) ;
addressForm = fb.group( (
'house_no' : [null, Validators.required],
'LandMark' : [null, Validators.required] )) ;
然后还要确保上述复选框的结果有两个布尔变量。
然后您可以使用角度绑定来禁用或不禁用表单。
left div
姓名:<input type="text" .... [disabled]="! general_Info_Selected" />
年龄:<input type="text" .... [disabled]="! general_Info_Selected" />
right div
房号:<input type="number" .. [disabled]="! address_Selected" />
地标:<input type="text" .... [disabled]="! address_Selected" />