how to limit form array length?

Question

i have an form array which i want to limit to only 5 input elements generated by user and my form has following definition

 createskillForm()
    {
      this.skillForm=this.formBuilder.group({
        skills:this.formBuilder.array([this.createskillFeild()],Validators.minLength(1),Validators.maxLength(5))
      });
    }

i have tried making changes with minlength but it is showing the following error in the console :- RROR in src/app/components/com-profile/com-profile.component.ts(47,89): error TS2345: Argument of type 'ValidatorFn' is not assignable to parameter of type 'AsyncValidatorFn | AsyncValidatorFn[]'. Type 'ValidatorFn' is not assignable to type 'AsyncValidatorFn'. Type 'ValidationErrors' is not assignable to type 'Promise | Observable'. Type 'ValidationErrors' is not assignable to type 'Observable'. Property '_isScalar' is missing in type 'ValidationErrors'. what i can do to limit adding user only five skills ?

is there a method creating each new form? if there is, you could start in it with if (this.myFormArray.controls.length >= 5) return; this example will vary with each particular case, but you get the idea. If this is a method, do tell me to add it as an answer! Hope it helps. — Francisco Santorelli
– Francisco Santorelli, Commented Apr 23, 2019 at 23:02

Khalid Ali · Accepted Answer · 2019-04-24 03:19:39Z

1

Wrap your validators in an array. The error you're getting is because maxLength isn't an async validator, which is the variable you're putting it into..

constructor(formState: any = null, validatorOrOpts?: ValidatorFn | >AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[])

This is the correct code below. Not sure if this solves the problem you're trying to solve, but it fixes the error you have right now.

this.skillForm = this.formBuilder.group({
        skills:this.formBuilder.array([this.createskillFeild()], [ Validators.minLength(1), Validators.maxLength(5)] )
      });

edited Apr 24, 2019 at 3:19

Khalid Ali

1,2241 gold badge10 silver badges12 bronze badges

answered Apr 24, 2019 at 2:10

Sean Hamilton

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Atul kumar singh Over a year ago

It is still adding more than 5 fields and i want user to be able to add 5 fields only

Sean Hamilton Over a year ago

I thought it would still add more than 5 fields. I believe the length validator is for string or number length only. Add the Validators.required validator to the array and that should fix it. Otherwise it would need a custom validator (which is a really easy one to do in this case).

Collectives™ on Stack Overflow

how to limit form array length?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related