检查由 *ngFor 生成的字段是否有效并带有 required 标志

Question

我有一些输入字段的 *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 不存在。

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

ts

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

...

检查由 *ngFor 生成的字段是否有效并带有 required 标志

Check if fields generated by *ngFor are valid with required flag

html

angular

validation

ngfor