检查*ngFor生成的字段是否有效，并带有必需的标志

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