如何创建表单控件的值更改检测，该表单控件位于角度 18 中另一个表单组的表单数组内

Question

我有一个带有 FormArray 的表单，可以动态添加具有多个字段的行，包括单位、数量和备注。这是我的模板的一个片段，我在其中循环了unitDetails FormArray：

<tbody formArrayName="unitDetails">
  <tr *ngFor="let row of unitDetails.controls; let i = index" [formGroupName]="i">
    <td>{{ i + 1 }}</td>
    <td><input class="form-control" formControlName="unit" placeholder="Enter Name" /></td>
    <td><input class="form-control" formControlName="quantity" placeholder="Enter Quantity" /></td>
    <td><input class="form-control" formControlName="remarks" placeholder="Enter Remarks" /></td>
    <td><a class="btn btn-danger" (click)="removeUnitRow(i)">Remove</a></td>
  </tr>
</tbody>

表格的结构如下：

this.form = this.fb.group({
  unitDetails: this.fb.array([]), // Group for Unit, Quantity, Remarks
  discountDetails: this.fb.array([]), // Group for Qty From, Qty To, Discount, Cash Discount
  statusGroup: this.fb.group({
    status: ['']
  })
});

我想为unitDetails FormArray 内的数量表单控件添加一个valueChanges 处理程序，以确保只允许使用数字值。这是我迄今为止尝试过的：

form.get('quantity')?.valueChanges.subscribe(values => {
  console.log(values);
});

但是，这不起作用，因为数量位于 FormArray 内，并且我无法直接访问它。

如何跟踪 FormArray 中数量字段的更改并修改该值以仅接受数字？我还想阻止非数字输入。

任何人都可以提供解决方案或指导我如何在 Angular 中实现这一目标吗？

Answer 1

如果您只想要数值，那么您应该将其设置为

type="number"

。

<td><input class="form-control" type="number" formControlName="unit" placeholder="Enter Name" /></td>

为了节省一些复杂的代码，我建议使用

(input)

事件的简单方法，该方法将与

valueChange

相同地触发，并且您可以使用更少的代码来使用它。

<tbody formArrayName="unitDetails">
  <tr *ngFor="let row of unitDetails.controls; let i = index" [formGroupName]="i">
    <td>{{ i + 1 }}</td>
    <td><input class="form-control" formControlName="unit" placeholder="Enter Name" (input)="unitChange($event)"/></td>
    <td><input class="form-control" formControlName="quantity" placeholder="Enter Quantity" (input)="quantityChange($event)"/></td>
    <td><input class="form-control" formControlName="remarks" placeholder="Enter Remarks" (input)="remarksChange($event)"/></td>
    <td><a class="btn btn-danger" (click)="removeUnitRow(i)">Remove</a></td>
  </tr>
</tbody>

然后您可以访问该值，例如：

unitChange(event: any) {
  const value = event.target.value;
  console.log('unit change: ', value); 
}