javascript - 为什么单击动态表单域中的一个下拉列表会自动触发另一个表单域中的另一个下拉列表

Question

我正在尝试使用下拉列表创建一个动态表单字段，用户可以在其中添加和删除多个贡献者。现在我的代码能够添​​加和删除多个用户，但是每当我添加多个贡献者时，然后单击下拉列表，第一个下拉列表以及选定的下拉列表会自动触发，并且它们都开始显示可用的用户列表.

示例.component.html：

<mat-form-field>
      <mat-label>Add Contributor</mat-label>
      <div formArrayName="contributors">

          <div *ngFor="let contributor of contributors.controls;
                       let contributorIndex=index"
                       [formGroupName]="contributorIndex">

            <mat-select formControlName="contributor">
              <mat-option *ngFor="let user of users" [value]="user.id">
                {{user.id + ' - ' + user.firstName}}
              </mat-option>
            </mat-select>

            <button type="button" class="deleteButton" (click)="deleteContributor(contributorIndex);" mat-mini-fab color="warn" aria-label="Delete contributor.">
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        <button type="button" class="addButton" (click)="addContributor()" mat-mini-fab color="primary" aria-label="Add another contributor.">
          <mat-icon>add</mat-icon>
        </button>
      </div>
    </mat-form-field>

sample.component.ts：

export class SampleComponent implements OnInit {

  kpiForm: FormGroup;

  constructor(
    private dialogRef: MatDialogRef<AddEditKpiDialogComponent>,
    private formBuilder: FormBuilder,
    private dialog: MatDialog
  ) {
    this.kpiForm = this.formBuilder.group({
      contributors: this.formBuilder.array([this.formBuilder.group({contributor: ['', Validators.required]})]),
    });

   get contributors() {
    return this.kpiForm.get('contributors') as FormArray;
  }

  addContributor() {
    this.contributors.push(this.formBuilder.group({contributor: ''}));
  }

  deleteContributor(index) {
    if (this.contributors.length > 1) {
      this.contributors.removeAt(index);
    }
  }
}

问题截图：

当我点击第三个下拉列表时，第一个自动被触发：

添加了 3 位贡献者：

标签： javascripthtmlangulartypescriptangular-reactive-forms

Answer 1

每个人都<mat-select>应该有自己的<mat-form-field>.

<div>将您更改*ngFor为一个<mat-form-field>（也许将您现有的 mat-form-field 更改为 div）：

<mat-form-field *ngFor="let contributor of contributors.controls; let contributorIndex=index" [formGroupName]="contributorIndex">