Cfrgtkky

I have a reactive form that is basically this.

ngOnInit() {



    this.myForm = this.fb.group({

      sections: this.fb.array()

    });

  }



  addSection(){

    let section = <FormArray>this.myForm.controls.sections;

    section.push(this.fb.group({

      name: '',

      items: this.fb.array(),

      percentage: '',

    }));

  }

addSection() is a function that adds an element to my sections FormArray when i click something that's on my template

I sum up all percentages from every section inside the sections formArray and validate that it isn't bigger than 1 (I assume user is typing floating points in those specific inputs). Finally i want to disable the submit button at the end of the form if the sum if bigger than 1.

I tried the answer from this question but didn't work cause https://stackoverflow.com/a/48706808/8579973 cause it was meant for a group of object thats all the same. I need it to validate just the "percentage" element from every group that is made.

I also tried to store the sum in local storage, but I don't want any extra button that triggers that procedure.

Thanks for your answers,
Regards

Like this? Stackblitz: https://stackblitz.com/edit/angular-vdgdv2

import { Component} from '@angular/core';

import {FormBuilder, FormControl, FormArray, FormGroup, FormGroupDirective, NgForm, ValidatorFn, Validators} from '@angular/forms';





@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent{

  myForm: FormGroup;

  constructor(private fb: FormBuilder){

    this.myForm = this.fb.group({

      sections: this.fb.array(, CustomValidator.checkPercentageSum)

    });

    this.addSection();

  }



  addSection(){

    let section = this.myForm.get('sections') as FormArray;

    section.push(this.fb.group({

      percentage: 0.2,

    }));

    section.push(this.fb.group({

      percentage: 0.3,

    }));

    section.push(this.fb.group({

      percentage: 1,

    }));



    console.log(this.myForm.valid , this.myForm.get('sections').errors);

    // Output: false {Invalid: true}

  }



}



//Custom Validator

export class CustomValidator {

  static checkPercentageSum(sections: FormArray): ValidationResult {

    if (sections) {

      let sumOfPercentages: number = 0;

      sections['controls'].forEach((sectionItem: FormGroup) => {

        sumOfPercentages = sectionItem['controls'].percentage.value + sumOfPercentages;

      });



      if (sumOfPercentages > 1) {

        return {"Invalid": true};

      }

    }

    return null;

  }

}



export interface ValidationResult {

  [key: string]: boolean;

}