As you can see in this stack blitz example min and max validation is firing

https://stackblitz.com/edit/angular-mat-form-field-icrmfw

But in the below stack blitz, I have made an array of the same controls , but the validation is not firing

https://stackblitz.com/edit/angular-mat-form-field-hmmm69

    <form  [formGroup]="configWeightage">
  <table >
    <thead>
      <tr>
        <th scope="col">Category</th>
        <th scope="col">Weightage</th>
      </tr>
    </thead>
    <tbody>
      <ng-container>
        <tr
          *ngFor="let order of configWeightage.get('weightageFormArray').controls; let i = index"
          formArrayName="weightageFormArray"
        >
          <td>{{j_s_weightage[i].name}}</td>
          <td>
            <div >
              <mat-form-field>
                <input
                  matInput
                  type="number"
                  
                  formControlName="i"
                  id="weightage"
                  required
                />
                <mat-error
                  *ngIf="configWeightage.get('weightageFormArray').hasError('min')"
                  >Please enter greater than 0</mat-error
                >
                <mat-error
                  *ngIf="configWeightage.get('weightageFormArray').hasError('max')"
                  >Please enter less than 100</mat-error
                >
              </mat-form-field>
            </div>
          </td>
          <td>%</td>
        </tr>
      </ng-container>
      <tr>
        <td>Total Weightage</td>
        <td ><label>{{weightage}}</label></td>
      </tr>

      <tr>
        <td></td>
        <span 
          >Sum of weightage should be 100.</span
        >
      </tr>
    </tbody>
  </table>
</form>

This is my class file

    import { Component } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
  FormControl,
  FormArray,
} from '@angular/forms';

/** @title Form field with prefix & suffix */
@Component({
  selector: 'form-field-prefix-suffix-example',
  templateUrl: 'form-field-prefix-suffix-example.html',
  styleUrls: ['form-field-prefix-suffix-example.css'],
})
export class FormFieldPrefixSuffixExample {
  configWeightage: FormGroup;
  formBuilder: FormBuilder;
  hide = true;
  services: FormArray;
  weightageValueArray = [];
  j_s_weightage = [];
  attrWeightage: any = { name: '' };
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.configWeightage = this.fb.group({
      weightageFormArray: new FormArray([], [Validators.required, Validators.min(0), Validators.max(100)])
    });
    
    this.attrWeightage.name = "flexiblity";
    this.j_s_weightage.push(this.attrWeightage);
    this.attrWeightage = { name: '' };
    this.attrWeightage.name = "flexiblity2";
    this.j_s_weightage.push(this.attrWeightage);
    this.weightageValueArray.push(60);
    this.weightageValueArray.push(40);
    // console.log(this.configWeightage)
    this.services = this.configWeightage.get('weightageFormArray') as FormArray;
    let dbSize = this.services.length;
    for (; 0 < dbSize; dbSize--) {
      this.services.removeAt(dbSize - 1);
    }
    this.j_s_weightage.map((o, i) => {
      const control = new FormControl(0);
      (this.configWeightage.controls.weightageFormArray as FormArray).push(control);
    });
  }
}

CodePudding user response：

Okay found your issue:

1. formControlName="i" in inspect element formcontrolname was i, and not a number. use angular string interpolation [formControlName]="i" or formControlName="{{i}}
2. here you are checking whole array, not individual controle. it still works though if any of inputs has error. but will show error for both inputs.

<mat-error *ngIf="configWeightage.get('weightageFormArray').hasError('min')">Please enter greater than 0</mat-error>
<mat-error *ngIf="configWeightage.get('weightageFormArray').hasError('max')">Please enter less than 100</mat-error>```
<!--Change above to -->
<mat-error *ngIf="configWeightage.get('weightageFormArray').controls[i].hasError('min')">Please enter greater than 0</mat-error>
<mat-error *ngIf="configWeightage.get('weightageFormArray').controls[i].hasError('max')">Please enter less than 100</mat-error>

3. in ts file: instead of giving validators to formarray, give it to individual controller:

// change this 
this.configWeightage = this.fb.group({
      weightageFormArray: new FormArray([], [Validators.required, Validators.min(0), Validators.max(100)])
    });
// to this
this.configWeightage = this.fb.group({
      weightageFormArray: new FormArray([])
    });
// and this 
this.j_s_weightage.map((o, i) => {
      const control = new FormControl(0);
      (this.configWeightage.controls.weightageFormArray as FormArray).push(control);
}); 
// to this
this.j_s_weightage.map((o, i) => {
      const control = new FormControl(0,[Validators.required, Validators.min(0), Validators.max(100)]);
      (this.configWeightage.controls.weightageFormArray as FormArray).push(control);
});