0

Hi StackOverFlow community, I m struggling with a custom validation in a template driven forms. I have a stepper component and I have a unique form that wraps all the groups. In each step I would like to have the sum of the inputs to be 100%, otherwise it should display an error (like it is for the required and the min and max).

I created an array which it should push every value of the single group, but instead it's pushing each key value and it creates a new array in each input.

Here you have the stackblitz link : https://stackblitz.com/edit/clarity-light-theme-v2-7qtpcz?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

Thank you in advance :)

edit: The checkPercentage function works fine, but I need to fix the directive which is not working as the checkPercentage function does and I want to have the same behaviour.

Federica Lavigne
  • 1
  • 6

1 Answers1

0

Maybe change the checkPercentage() method like this:

checkPercentage() {
    let singularPercentage: string;
    let myArr: number[];
    let testArr: number[];
    let sum: number;
    for (let allocation in this.allocations) {
      singularPercentage = this.allocationForm?.value;
      myArr = [...myArr, Object.values(singularPercentage)];
      for (let arr of myArr) {
        testArr = Object.values(arr);
        sum = eval(testArr.join('+'));
        if (sum !== 100) {
          this.alert = true;
        } else {
          this.alert = false;
        }
      }
    }
  }

You are creating new const for each 'allocations' and for each 'arr'.

Nodi
  • 29
  • 4