最小和最大验证在我不使用数组时触发，但在我使用数组控件时不触发

Question

如您在此堆栈闪电战示例中所见，正在触发最小和最大验证

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

但是在下面的堆栈闪电战中，我制作了一个相同控件的数组，但是验证没有触发

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

    <form class="form" [formGroup]="configWeightage">
  <table class="DSA_custom-table col-md-6">
    <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 class="example-container">
              <mat-form-field>
                <input
                  matInput
                  type="number"
                  class="example-right-align"
                  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 class="text-center"><label>{{weightage}}</label></td>
      </tr>

      <tr>
        <td></td>
        <span class="DSA_wb_caption text-primary text-right"
          >Sum of weightage should be 100.</span
        >
      </tr>
    </tbody>
  </table>
</form>

这是我的 class 文件

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

Answer 1

好的，找到您的问题：

formControlName="i" in inspect element formcontrolname 是 i，而不是数字。使用 angular 字符串插值 [formControlName]="i" 或 formControlName="{{i}}
这里你检查的是整个数组，而不是单个控件。如果任何输入有错误，它仍然有效。但会显示两个输入的错误。

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

在 ts 文件中：不是将验证器提供给 formarray，而是将其提供给单独的控制器：

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

最小和最大验证在我不使用数组时触发，但在我使用数组控件时不触发

min and max validation is firing when i am not using array, but not firing when i use array controls

javascript

html

angular

typescript

angular8