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

Question

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

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 个贡献者：

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">

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

Why clicking on one dropdown list inside a dynamic form field automatically trigger another dropdown list from another form field

html

javascript

typescript

angular

angular-reactive-forms