CODEWITHSUNDEEP
javascriptangulartypescript
Atul kumar singh
Atul kumar singh

Reputation: 329

how to limit form array length?

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 ?

Upvotes: 1

Views: 4310

Answers (1)

Sean Hamilton
Sean Hamilton

Reputation: 11

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)] )
      });

Upvotes: 1

Related Questions