Set formvalidator on FormArray for required and minlength

Question

I am looking to set a minlength validator on a formArray element.

Here's how I created the form.

this.fb.group({
            FieldName: ['', [Validators.required, Validators.pattern(/^\S*/)]],
            Treatment: '',
            Properties: this.fb.group(
                {
                    contentType: this.fb.array([]),
                    multipleItems: false,
                    keyType: this.fb.group({
                        'Type': '',
                        'Prefix': '',
                        'Suffix': ''
                    }),
                }
            )
        });

This is the code I am trying. It doesn't get applied, and the form totally ignores this and becomes valid.

this.fieldForm.get('Properties.contentType').setValidators([Validators.required, Validators.minLength(1)]);

where do you create the formGroup? can you add the code to the question? — Anuradha Gunasekara, Jul 18 '18 at 06:35
is there any specific reason to add setValidators after form control initialize? — Chellappan வ, Jul 18 '18 at 06:44
@Chellappan yes, these controls are initialized only if certain value is selected. I don't want the whole form to be invalid if that particular value is not selected. — Aijaz, Jul 18 '18 at 06:47
Possible duplicate of [Angular 2 FormGroup Add Validators dynamic](https://stackoverflow.com/questions/43603605/angular-2-formgroup-add-validators-dynamic) — Amit Chigadani, Jul 18 '18 at 07:00

Amit Chigadani · Accepted Answer · 2018-07-18T07:42:12.183

3

You have to call updateValueAndValidity() after setting new validators

this.fieldForm.get('Properties.contentType').setValidators([Validators.required, Validators.minLength(1)]);
this.fieldForm.get('Properties.contentType').updateValueAndValidity();

Also Note that, it has to be this.fieldForm.get('Properties').get('contentType').setValidators([Validators.required, Validators.minLength(1)]);

Because you have child form group for Properties control.

edited Jul 18 '18 at 07:42

answered Jul 18 '18 at 07:00

Amit Chigadani

28,482
13
80
98

That worked. One quick question. I am trying to apply a class to it when it doesn't meet the requirement. I am testing it like this. {{this.fieldForm.get('Properties.contentType').hasError('minLength')}} And it shows false. – Aijaz Jul 18 '18 at 07:08
Correct the spelling of minlength. all lower case – Amit Chigadani Jul 18 '18 at 07:09
still shows false. Even though the form is invalid because it didn't meet the min length requirements. :/ – Aijaz Jul 18 '18 at 07:17
{{fieldForm.get('Properties.contentType').hasError('minlength')}} – Aijaz Jul 18 '18 at 07:19
`Validators.minLength(1)` is equivalent to `Validators.required` because you are checking for `length=1`, So it fires up required error instead. try changing it to some higher value and check. – Amit Chigadani Jul 18 '18 at 07:19
You are killing it! Thanks! it worked. I checked the DOM and it was just adding required in the errors. – Aijaz Jul 18 '18 at 07:24
Note that, it has to be `this.fieldForm.get('Properties').get('contentType').setValidators([Validators.required, Validators.minLength(1)]);` Because you have child form group for `Properties` control – Amit Chigadani Jul 18 '18 at 07:40
Will do that. I checked the answer as accepted, because he has lesser points, even though both the answers are perfect. Thanks again! – Aijaz Jul 18 '18 at 07:52
You should give preference to the one who was quick to answer and solve your problem – Amit Chigadani Jul 18 '18 at 07:52

score 2 · Answer 2 · answered Jul 18 '18 at 07:02

2

Set a validator for a control in the FormGroup: this.myForm.controls['controlName'].setValidators([Validators.required])

Remove the validator from the control in the FormGroup: this.myForm.controls['controlName'].clearValidators()

Update the FormGroup once you have run either of the above lines. this.myForm.controls['controlName'].updateValueAndValidity()

Source

So the context

    this.fieldForm.controls['Properties.contentType'].setValidators([Validators.required, Validators.minLength(1)]);
    this.fieldForm.controls['Properties.contentType'].updateValueAndValidity()

answered Jul 18 '18 at 07:02

Keshan Nageswaran

8,060
3
28
45

That worked. One quick question. I am trying to apply a class to it when it doesn't meet the requirement. I am testing it like this. {{this.fieldForm.get('Properties.contentType').hasError('minLength')}} And it shows false. – Aijaz Jul 18 '18 at 07:08
@Aijaz error key is `minlength` not `minLength` so it has to be `.hasError('minlength')` – Keshan Nageswaran Jul 18 '18 at 07:11
still shows false. Even though the form is invalid because it didn't meet the min length requirements. :/ – Aijaz Jul 18 '18 at 07:17
{{fieldForm.get('Properties.contentType').hasError('minlength')}} – Aijaz Jul 18 '18 at 07:19
You are killing it! Thanks! it worked. I checked the DOM and it was just adding required in the errors. – Aijaz Jul 18 '18 at 07:24

Set formvalidator on FormArray for required and minlength

2 Answers2