模板驱动方法:以角度2形式动态添加所需属性到输入字段。但角形式验证(form.valid)无法识别动态添加的必填字段。
<input type="text" [(ngModel)]="coumnName" name="coumnName" >
动态添加所需:
document.getElementsByName(columnName)[0].setAttribute('required', '');
您可以使用相同的技术为动态形式的FormControl
动态设置验证器,但使用NgForm
指令。怎么会? NgForm
指令实际上做了什么角度,它创建了FormControl
实例,注册到您在表单中指定的name
。
所以你可以做的是导入NgForm
,Validators
和ViewChild
来引用你的表单,并能够在你的组件中使用它。作为旁注,我看到你的ngModel
变量与name
属性相同。这不起作用,它们必须是独一无二的。
所以做以下事情:
<form #f="ngForm">
<input [(ngModel)]="coumnNameModel" name="coumnName" #coumnName="ngModel">
</form>
在你的组件中,导入NgForm
和ViewChild
,然后使用setValidators()
并设置你想要的任何验证器,然后调用updateValueAndValidity()
:
@ViewChild('f') myForm: NgForm;
// when you want to set required validator:
setRequired() {
this.myForm.form.get('coumnName').setValidators([Validators.required])
this.myForm.form.get('coumnName').updateValueAndValidity();
}
实际上,一旦启动数据绑定,您就不再使用HTML属性了。您没有设置属性。您正在设置DOM元素,组件和指令的属性。
你可以读这个official doc
只需要添加:
[required]="isConditionIsTrue"
在你的输入中。
您可以使用条件或布尔值。
注意:如果您使用formControls,您应该:
添加所需的控件或任何其他控件:
this.form.addControl('formControlName', new FormControl(ValueToSet, Validators.required));
如果要删除所需的控件或任何其他控件:
this.form.get('formControlName').reset();
this.form.removeControl('formControlName');