最小和最大驗證在我不使用陣列時觸發，但在我使用陣列控制元件時不觸發

正如您在此堆疊閃電戰示例中看到的那樣，最小和最大驗證正在觸發

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>

這是我的類檔案

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

uj5u.com熱心網友回復：

好的，找到您的問題：

1. formControlName="i"在檢查元素 formcontrolname 是 i，而不是數字。使用角度字串插值[formControlName]="i"或formControlName="{{i}}
2. 在這里，您正在檢查整個陣列，而不是單個控制元件。如果任何輸入有錯誤，它仍然有效。但會顯示兩個輸入的錯誤。

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

標籤：javascript html 有角度的 打字稿 角8

上一篇：DjangoRestFramework允許請求在CreateAPIView中設定外鍵欄位

下一篇：為什么將Span用于輸入標簽和樣式？