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(); }：

rails 5.1.4

StackBlitz

Answer 2

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

您可以阅读此official doc

Answer 3

只需添加：

[required]="isConditionIsTrue"

在您的输入中。

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

注意：如果您使用的是FormControl，则应该 d：

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

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

，以及是否要删除所需的控件或任何其他控件：

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

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

3 个答案:

StackBlitz