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

Question

模板驱动方法:动态地将所需属性添加到以 Angular 2 形式提交的输入中。但是 Angular 表单验证(form.valid)无法识别动态添加的必填字段。

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

动态添加要求:

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

Answer 1

您可以使用与以 react 形式为 FormControl 动态设置验证器相同的技术，但使用 NgForm 指令。怎么来的？ Angular 实际上对 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