动态添加需要以模板驱动的 angular 2 形式输入

Question

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

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

动态添加需要：

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

Answer 1

您可以使用与FormControl以反应形式为 a 动态设置验证器相同的技术，但使用NgForm指令。怎么来的？angular 实际上对NgForm指令做了什么，它创建了FormControl注册到name您在表单中分配的实例。

所以你可以做的是 import 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();
}

闪电战