如何在具有动态名称（键）的 ngFor 中使用 [(ngModel)]

Question

我有 NgFor 在两个不同的 div 上生成的角度形式。我想让表单字段独一无二。 both fields are not working individually

<div *ngFor="let configField of configFields; let i = index"><mat-form-field fxFlex fxFlex.lt-md="calc(50% - 16px)" >
    <input matInput placeholder="Url" name="url_{{i}}" [(ngModel)]="headerFields.url" >
  </mat-form-field>
  <mat-form-field fxFlex fxFlex.lt-md="calc(50% - 16px)" >
  <input matInput placeholder="Method" name="type_{{i}}" [(ngModel)]="headerFields.type">
 </mat-form-field></div>

我想在 (headerFields)Array 中唯一标识的字段名称上添加标志.. like name="type_{{i}}" type_1 ,type_2

Answer 1

在初始化或分配 configFields 时，您可以初始化或分配给 headerFields 一个长度等于 configFields 的数组，其中 url 和 type 设置为空。类似于以下内容：

const configFields = [1,2,3];
const headerFields = Array.from(configFields, (el) => ({ url: '', type: ''})) // Set to empty string or null as desired]

Answer 2

改用表单数组怎么样？

文件组件.ts

export class AppComponent {


form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = fb.group({
      config: fb.array([])
    });
  }

  addNewAddressGroup() {
    const add = this.form.get('config') as FormArray;
    add.push(
      this.fb.group({
        url: [],
        type: []
      })
    );
  }

  deleteAddressGroup(index: number) {
    const add = this.form.get('config') as FormArray;
    add.removeAt(index);
  }
}

文件 html.ts

<div [formGroup]="form">
  <div>
    <button (click)="addNewAddressGroup()">Add</button>
  </div>

  <div
    *ngFor="let addressGroup of form.get('config').controls;let i = index"
    [formGroup]="addressGroup">
    
    <div>Url <input formControlName="url" /></div>
    <div>Type <input formControlName="type" /></div>
    <button (click)="deleteAddressGroup(i)">Delete</button>
  </div>
</div>

result <br />

<pre>
{{form.value | json}}
</pre>

你可以看看这个Demo