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

问题描述 投票:2回答:3

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

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

动态添加所需:

document.getElementsByName(columnName)[0].setAttribute('required', '');
angular angular2-forms
3个回答
4
投票

您可以使用相同的技术为动态形式的FormControl动态设置验证器,但使用NgForm指令。怎么会? NgForm指令实际上做了什么角度,它创建了FormControl实例,注册到您在表单中指定的name

所以你可以做的是导入NgFormValidatorsViewChild来引用你的表单,并能够在你的组件中使用它。作为旁注,我看到你的ngModel变量与name属性相同。这不起作用,它们必须是独一无二的。

所以做以下事情:

<form #f="ngForm">
  <input [(ngModel)]="coumnNameModel" name="coumnName" #coumnName="ngModel">
</form>

在你的组件中,导入NgFormViewChild,然后使用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


1
投票

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

你可以读这个official doc


1
投票

只需要添加:

[required]="isConditionIsTrue"

在你的输入中。

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

注意:如果您使用formControls,您应该:

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

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

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

this.form.get('formControlName').reset();
this.form.removeControl('formControlName');
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.