在角反应性形式中，为什么HTML选择不明确值？

Question

我正在使用Angular 13反应性形式。

我在每个可重复使用的组件中都有一个简单的方法，可以清除所选择/选择的任何内容的值。它可以与我的输入和自动完成，但不能选择。这是方法和相关的TS：

@Input() parentFormGroup!: FormGroup;
@Input() selectFormControlName!: string;
@Input() selectAbstractControl!: AbstractControl;
@Input() options: string[] = ['Rain', 'Sleet', 'Hail', 'Mist'];
@Input() includeClearButton: boolean = true;

ngOnInit() {
    this._setUpForm();
  }

  ngOnChanges() {}

  ngOnDestroy() {
    this._removeControl();
  }

  private _setUpForm() {
    this.parentFormGroup.addControl(
      this.selectFormControlName,
      this.selectAbstractControl
    );
  }

  private _removeControl() {
    this.parentFormGroup.removeControl(this.selectFormControlName);
  }

  clearInput() {
    this.selectAbstractControl.patchValue('');
    this.selectAbstractControl.updateValueAndValidity();
  }

这是HTML：

  <select>
    <option hidden selected value=""></option>
    <option *ngFor="let option of options">{{ option }}</option>
  </select>
  <button *ngIf="includeClearButton" type="button" (click)="clearInput()">
    X
  </button>

令人惊讶的是，我在网上没有找到任何答案。足以让我想知道这是否是错字的，因为我不知道为什么PatchValue（）和UpdateValueAndVality（）可以在输入和自动完成，但不能选择。

我这里有什么想法吗？

Answer 1

我发现了。

这是因为我忘了将[formgroup] =“ parentformgroup”添加到父div，而[formControlname] =“ selectformcontrolname”中的选择元素本身。