检查 *ngFor 生成的字段是否使用 required 标志有效答案

【问题标题】：Check if fields generated by *ngFor are valid with required flag检查 *ngFor 生成的字段是否使用 required 标志有效
【发布时间】：2020-12-21 20:24:06
【问题描述】：

我有这个 *ngFor 用于某些输入字段，

<ng-container *ngFor="let qp of myQuoted.quoteQuantityPrice; let index = i;">
            <td>
                <input #ng_price[i]="ngModel" class="number" type="number" pattern="[1-9]*" [(ngModel)]="qp.price" required>
            </td>
        </ng-container>

如果任何#ng_price 字段不遵循正则表达式模式且其中没有任何数据，我希望禁用此按钮

对于只有一个输入字段的对象，我会像这样禁用按钮：

 <button [disabled]= "ng_supplier.invalid || ng_inventory.invalid || ng_leadWeeks.invalid || ng_multOrderQty.invalid || ng_minOrderQty.invalid" (click)="Save()">Save</button>

我想将ng_price.invalid 添加到该验证器列表中我尝试在禁用的块中添加ng_price.invalid，但正如我所料，它并没有真正像那样工作，并且构建项目最终失败，因为ng_price.invalid 不存在。

【问题讨论】：

标签： html angular validation ngfor

【解决方案1】：

试试这个

html

<ng-container *ngFor="let qp of myQuoted.quoteQuantityPrice; let index = i;">
    <td>
    <form [formGroup]="formArr[i]">
        <input formControlName="app_price" class="number" type="number">
      </form>
    </td>
 </ng-container>

...

<button [disabled]= "(formArr[i].get('app_price').touched && formArr[i].get('app_price').invalid) || ng_supplier.invalid || ng_inventory.invalid || ng_leadWeeks.invalid || ng_multOrderQty.invalid || ng_minOrderQty.invalid" (click)="Save()">Save</button>

    formArr: any[] = [];
    pricePattern: any = "[1-9]*" ;

...

  constructor(
    private fb: FormBuilder,
  ) {
        for (let j of this.myQuoted.quoteQuantityPrice) {
          this.formArr.push(
            this.fb.group({
              app_price: ["", [Validators.required, Validators.pattern(this.pricePattern)]],
            })
          );
        }
   }

...

【讨论】：