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

【问题标题】：Why clicking on one dropdown list inside a dynamic form field automatically trigger another dropdown list from another form field为什么单击动态表单域中的一个下拉列表会自动触发另一个表单域中的另一个下拉列表
【发布时间】：2021-07-23 18:58:31
【问题描述】：

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

sample.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 位贡献者：

【问题讨论】：

标签： javascript html angular typescript angular-reactive-forms

【解决方案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">

【讨论】：

这解决了这个问题，非常感谢，但为什么它不像我以前那样工作？