Question

我需要对所有字段使用唯一的输入字段名称。我不能使用[ngModelOptions]="{standalone: true}"，因为我的表单存在验证问题（验证中将忽略这些字段）。这是我的代码的一部分：

<ng-template pTemplate="rowgroupfooter" let-vehicle>
    <td>
      <mat-input-container class="full-width" color="warn">
        <input matInput [(ngModel)]="vehicle.subscription_price" [ngModelOptions]="{standalone: true}" required [disabled]="viewMode" type="number" min="0" [ngClass]="{ 'edited-price': vehicle.isSubscriptionPriceChanged }"
          (input)="vehicle.isSubscriptionPriceChanged=true;" pInputText appendTo="body" style="background-color: white">
        <mat-error>To pole jest wymagane</mat-error>
      </mat-input-container>
    </td>
...(more rows)
</ng-template>

因此，如何动态添加name="index"。

例如

name ='1'

name ='2'

...

name ='n'

Answer 1

如果您打算在表单中使用多个输入，则可以在此处使用表单数组：

reactive form array

Basic Demo

创建控件：

constructor(private fb: FormBuilder) {}

 createForm() {
    this.myForm = this.fb.group({
      people: this.fb.array([this.createArray()])
    })
  }

  createArray() {
    return this.fb.group({
      name: null,
      addresses: null
    });
  }

访问控制：

{{myForm.controls.people.controls[i].controls.name.value}}

Answer 2

我建议使用Reactive Forms，以便您可以从FormArray中受益：

https://angular.io/guide/reactive-forms#dynamic-controls-using-form-arrays

因此您可以轻松地执行以下操作：

<div formArrayName="yourFormArray">

  <div *ngFor="let control of yourFormArray.controls; let i=index">
    <!-- The repeated template -->
    <label>
      Your Control:
      <input type="text" [formControlName]="i">
    </label>
  </div>
</div>

如何在输入字段中动态添加名称？

2 个答案: