验证反应性表单元素的总和

Question

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

Answer 1

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