FormArray should be invalid when the FormArray is empty

Question

I have created form with FormArray like below mentioned

    this.createModuleForm = this.fb.group({
        artefactType: ['', Validators.required],
        uploadDocuments: this.fb.array([]),
    });

then I'm pushing the object into the FormArray

        formArray.push(this.fb.group({name: event.name, url: event.url, submittedBy: 'siva', role: this.currentUser.value.role}));

Problem: If the uploadDocuments(FormArray) is empty, need to make Form is invalid and UploadDocuments should be mandatoary

You can do via check length uploadDocuments formArray in template — Robert
– Robert, Commented Feb 19, 2019 at 7:12

Chellappan வ · Accepted Answer · 2019-02-19 07:39:07Z

4

create custom Validator

I have created minAdded function that will check wheather the current formarray has minimum one group or not

component.ts

 this.createModuleForm = this.fb.group({
        artefactType: 'De',
        uploadDocuments: this.fb.array([], minAdded(1))
 })

    function minAdded(min = 1) {
      const validator: ValidatorFn = (formArray: FormArray) => {
        const minAdded = formArray.controls
          .map(control => control.value).length;    
        return minAdded >= min ? null : { required: true };
      };    
   return validator;
 }

Ref: https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular Example:https://stackblitz.com/edit/angular-dcy9z9

answered Feb 19, 2019 at 7:39

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

FormArray should be invalid when the FormArray is empty

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related