以Angular 动态添加和删除组件形状元素

请避免使用@Input或@Output的指令，您正在使用formControlName作为输入，这会导致错误.

对于这个场景，最好是*ngFor，而不是视图容器ref，因为它更简单，但我提供了这两种方法供您查看.

使用ngFor

    <div formArrayName="selectArr">
      <gcr-select-form *ngFor="let control of selectArrControls" [control]="control"
      ></gcr-select-form>
    </div>

对于这个特定的场景，如果我们将控件作为输入传递，我们将能够正确地绑定SELECT.同样，你最好 Select formArray个而不是独一无二的控件，因为它更容易维护！

我们还需要做useExisting: forwardRef(() => FormGroupDirective),来防止Angular 抛出那个错误，当我们使用forwardRef时，它指的是尚未定义的引用.

请在下面找到工作示例！

双手

import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import {
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
} from '@angular/forms';
import { SelectReteComponent } from './ children / children .component';
import { provideAnimations } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
  <form [formGroup]="form">
    <div formArrayName="selectArr">
              <gcr-select-form [control]="selectArrControls[0]"
              ></gcr-select-form>
            <ng-template #containerMoreSelect></ng-template>
            </div>
</form>
              <button mat-stroked-button (click)="click()">Add More</button>`,
  styles: [``],
  imports: [SelectReteComponent, ReactiveFormsModule, CommonModule],
  providers: [
    {
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue: { showError: true },
    },
  ],
})
export class App {
  @ViewChild('containerMoreSelect', {
    read: ViewContainerRef,
  })
  containerMoreSelect!: ViewContainerRef;

  public form: FormGroup = new FormGroup({
    selectArr: new FormArray([new FormControl()]),
  });

  constructor() {}
  ngOnInit(): void {
    this.formInit();
  }

  formInit() {}

  get selectArr(): FormArray {
    return this.form.get('selectArr') as FormArray;
  }

  get selectArrControls(): FormControl[] {
    return this.selectArr?.controls as FormControl[];
  }

  click() {
    const array = this.selectArr;
    array.push(new FormControl());
    const component =
      this.containerMoreSelect.createComponent(SelectReteComponent);
    component.setInput(
      'control',
      this.selectArrControls[this.selectArrControls.length - 1]
    );
    component.setInput('otherParam', 'OK');
  }
}

bootstrapApplication(App, {
  providers: [provideAnimations()],
});

children

import { CommonModule } from '@angular/common';
import {
  Component,
  EventEmitter,
  forwardRef,
  Input,
  OnChanges,
  Output,
  SimpleChanges,
} from '@angular/core';
import {
  AbstractControl,
  ControlContainer,
  FormArray,
  FormControl,
  FormGroup,
  FormGroupDirective,
  ReactiveFormsModule,
} from '@angular/forms';
import { MatSelectChange, MatSelectModule } from '@angular/material/select';

@Component({
  selector: 'gcr-select-form',
  imports: [MatSelectModule, ReactiveFormsModule, CommonModule],
  standalone: true,
  template: `
  <mat-form-field>
    <mat-label>Select what you prefer</mat-label>
    <mat-select
      [formControl]="control"
      (selectionChange)="getSelection($event)">
      <mat-option></mat-option>
      <mat-option *ngFor="let value of values" [value]="value.id">
        {{ value.text}}
      </mat-option>
    </mat-select>
  </mat-form-field>`,
  styles: ``,
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: forwardRef(() => FormGroupDirective),
    },
  ],
})
export class SelectReteComponent implements OnChanges {
  @Input() control!: FormControl;
  @Input() formControlName!: number;
  @Input() otherParam!: string;
  @Output() selected = new EventEmitter<any>();
  values = [
    { id: 1, text: 'test' },
    { id: 2, text: 'test2' },
    { id: 3, text: 'test3' },
  ];
  form!: FormGroup;
  constructor(private controlContainer: ControlContainer) {}

  /* Data are loaded from DB */

  ngOnChanges(changes: SimpleChanges) {
    /* Other stuff */
    // console.log('formGroup' + this.formGroup.controls); // I can see all control, control2 included
    // console.log('formControlName ' + this.formControlName); // It shows control2 correctly
    // console.log('otherParam' + this.otherParam); // It shows "OK"
  }

  getSelection(event: MatSelectChange) {
    console.log('event.value ' + event.value);
    this.selected.emit({
      value: event.value,
      text: event.source.triggerValue,
    });
  }
}

stackblitz