以模板驱动的角度2形式动态添加输入所需

Question

模板驱动方法：以角度2形式动态添加所需属性到输入字段。但角形式验证（form.valid）无法识别动态添加的必填字段。

 <input type="text"  [(ngModel)]="coumnName" name="coumnName" >

动态添加所需：

document.getElementsByName(columnName)[0].setAttribute('required', '');

Answer 1

您可以使用相同的技术为动态形式的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();
}

StackBlitz

Answer 2

实际上，一旦启动数据绑定，您就不再使用HTML属性了。您没有设置属性。您正在设置DOM元素，组件和指令的属性。

你可以读这个official doc

Answer 3

只需要添加：

[required]="isConditionIsTrue"

在你的输入中。

您可以使用条件或布尔值。

注意：如果您使用formControls，您应该：

添加所需的控件或任何其他控件：

this.form.addControl('formControlName', new FormControl(ValueToSet, Validators.required));

如果要删除所需的控件或任何其他控件：

this.form.get('formControlName').reset();
this.form.removeControl('formControlName');