How to add dynamic validation with reative forms

Question

I want to add validation on dynamically generated field. This is my code.

projectForm: FormGroup;

constructor(private sanitizer:DomSanitizer,private router: Router,private fb: FormBuilder,private projectService: ProjectService,private fnService:FunctionsService, private  userService : UserService) {      

    this.projectForm = fb.group({
        'shirnkrap':[null, Validators.required],
        'cd_text':[null, Validators.required],
        'assignto':[null, Validators.required],
        'projecttype':[null, Validators.required]

    });
}

on one function i want to add new validation which will trigger on <select>change event.

I try this,

this.projectForm.controls['project_name'].setValidators([Validators.required]); but it give me this error,

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'setValidators' of undefined

So can someone help me how can i add validation?

Can you share your code for adding the control? It should be something like : let control = new FormControl(); this.projectForm.addControl('project_name', control); — Samuel Shyu, Dec 26 '17 at 13:18
With your code simply inside a comment, it's really difficult to understand why the FormControl you added is undefined when you try to add a validator on it. Please update your answer with the relevant pieces of code needed to understand your error message. — Deblaton Jean-Philippe, Dec 26 '17 at 13:24

score 1 · Accepted Answer · edited Jan 02 '18 at 21:28

Your problem is not exactly with adding a validator to your form. It's more adding a control dynamically to your form.

Unfortunately, it looks like it's not something that is feasible with the method addControl. As per documentation, you should only use addControl() when you are instantiating the form.

So, how to deal with dynamic controls? 2 things are feasible: the first one, that looks too complicated would be to use a FormArray. Have a look at this answer for more information : How to dynamically add and remove form fields in Angular 2

The second one would be to initialize your form directly with your dynamic field:

this.projectForm = fb.group({
    'shirnkrap':[null, Validators.required],
    'cd_text':[null, Validators.required],
    'assignto':[null, Validators.required],
    'projecttype':[null, Validators.required],
    'project_name': ''
});

Inside your template, you would only have to hide that field based on your condition (using ng-if="my-selected-value === 'someValue'"

Then, on your <select> change, you would have to add your validator :

if(my-selected-value === 'someValue') {
    this.myForm.controls["firstName"].setValidators([Validators.required]);
    this.myForm.updateValueAndValidity();
}

Do not forget to update the validity of your form. Otherwise you will have to wait for the user to update a field before seeing that your form is not valid anymore.

You can see an example on Deborah Kurata's tutorial on Reactive Form here:

Template with *ngIf
Form is directly built with adresses
The way she suggests to update validators (on another field)

Thanks for such descriptive answer, this give me proper idea how to solve my problem. — Archish, Dec 27 '17 at 06:05

Sandip Jaiswal · Answer 2 · 2017-12-26T13:32:34.137

-3

Use following code to add validation dynamically:

this.myForm.controls["firstName"].setValidators([Validators.required]);

Your formGroup object don't have project_name field. You can also add formcontrol dynamically in your formgroup object.

this.projectForm.addControl("project_name", new FormControl(null));

Hope it will help

edited Dec 26 '17 at 13:32

answered Dec 26 '17 at 13:15

Sandip Jaiswal

3,428
2
13
15

Exactly what OP tried! `this.projectForm.controls['project_name'].setValidators([Validators.required]);`. Furthermore, it's incomplete! – Deblaton Jean-Philippe Dec 26 '17 at 13:16
That's still what OP has asked. – Deblaton Jean-Philippe Dec 26 '17 at 13:27

How to add dynamic validation with reative forms

2 Answers2