CODEWITHSUNDEEP
angularangular2-forms
Md Ghouse
Md Ghouse

Reputation: 311

Dynamically adding required to input in template driven angular 2 form

Template driven approach: Dynamically adding required attribute to input filed in angular 2 form. But the angular form validation(form.valid) not recognizing the dynamically added required field. 

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

Adding dynamically required:

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

Upvotes: 11

Views: 28935

Answers (3)

AVJT82
AVJT82

Reputation: 73357

You can use the same technique as setting a validator dynamically for a FormControl in a reactive form, but using the NgForm directive. How come? What angular actually does with the NgForm directive it creates FormControl instances registered to the name you assign in your form.

So what you can do, is import NgForm, Validators and ViewChild to reference your form and be able to use it in your component. As a side note, I see that your ngModel variable is the same as the name attribute. That won't work, they need to be unique.

So do the following:

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

and in your component, import NgForm and ViewChild and then use setValidators() and set whatever validators you want, then call 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

Upvotes: 20

J C
J C

Reputation: 761

Just need to add:

[required]="isConditionIsTrue"

in your input.

You can use a condition or a boolean.

NOTE: if you are using formControls you should:

add the required control, or any other control:

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

and if you want to remove the required control, or any other control:

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

Upvotes: 2

soulxy
soulxy

Reputation: 919

In fact, once you start data binding, you are no longer working with HTML attributes. You aren't setting attributes. You are setting the properties of DOM elements, components, and directives.

You can read this official doc

Upvotes: 2

Related Questions