angular 4 反应式表单验证无效

Question

我是 angular v4 的新手。我必须对表格进行验证。表单结构有两个复选框，如果我 select 第一个复选框，那么该表单的多个字段可以通过验证进行编辑，取消选中这些字段时，第二个复选框也可以使用相同的行为。这是页面的快照

如果单击常规信息复选框，则左侧的所有字段都应可通过验证进行编辑，取消选中时将禁用所有字段，如果选中所有字段应可通过验证进行编辑，则与地址复选框相同并在取消选中时将其禁用。

谢谢..

Answer 1

为一般信息和地址创建两个表单。

generalInfoForm = fb.group( (
   'name' : [null, Validators.required],
   'age'  : [null, Validators.required] .... )) ;

addressForm = fb.group( (
   'house_no' : [null, Validators.required],
   'LandMark'  : [null, Validators.required] )) ;

然后还要确保您有两个布尔变量用于上述复选框的结果。

然后你可以使用angular绑定来决定表单是否被禁用。

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" />

angular 4 反应式表单验证无效

angular 4 form validation with reactive form not working

angular

angularjs-directive

angular2-forms

angular4-forms

angular2-form-validation