Angular下拉框选Other时，onChange函数仅二次点击生效问题求助

我有一个Angular表单，需求是当下拉框选中“Other”选项时显示额外描述输入框，但当前函数仅在第二次选择时生效——必须先选一个选项、清空后再选“Other”才会触发，我需要用户首次点击选择“Other”时就显示该输入框。

原代码 #

HTML #

<form class="form-horizontal" [formGroup]="unableToScanForm" *ngIf="!loading" (ngSubmit)="onSubmit()">
  <div class="container">
    <div class="card-body">
      <div class="form-group row">
        <label class="col-md-4 col-form-label" for="reasonType"><strong>Reason*</strong></label>
        <div class="col-md-12">
          <ng-select id="reasonType" name="reasonType"
                     placeholder="Select a reason..."
                     labelForId="reasonType"
                     formControlName="reasonType"
                     [multiple]="false"
                     [hideSelected]="true"
                     [closeOnSelect]="true"
                     [items]="reasonType"
                     [searchable]="false"
                     bindLabel="type"
                     bindValue="type"
                     [ngClass]="{ 'is-invalid': submitted && f.reasonType.errors }">
          </ng-select>
          <div *ngIf="submitted && f.reasonType.errors" class="invalid-feedback">
            Please select a reason.
          </div>
        </div>
      </div>

      <div class="form-group row" *ngIf="showAdditionalInfo">
        <label class="col-md-4 col-form-label" for="reasonDescription"><strong>Additional Information*</strong></label>
        <div class="col-md-12">
          <textarea
                    rows="3"
                    class="form-control"
                    id="reasonDescription"
                    formControlName="reasonDescription"
                    [ngClass]="{ 'is-invalid': submitted && f.reasonDescription.errors }">
          </textarea>
          <div *ngIf="submitted && f.reasonDescription.errors" class="invalid-feedback">
            Please detail a description of the reason.
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

TypeScript #

reasonSelection(): void {
  this.unableToScanForm.valueChanges.subscribe(value => {
    if (value.reasonType === 'Other') {
      this.showAdditionalInfo = true;
    }
  });
}

解决方案 #

问题根源有两个：

1. valueChanges默认不会触发初始值检查，首次选择时订阅可能没及时响应；
2. 只处理了选中“Other”的情况，未覆盖切换到其他选项时的状态重置，容易导致逻辑混乱。

方法一：优化订阅逻辑 #

直接监听单个表单控件的变化，添加startWith让订阅立即生效，同时补充状态重置逻辑：

import { startWith } from 'rxjs/operators';

// 确保在组件初始化时调用订阅
ngOnInit(): void {
  this.reasonSelection();
}

reasonSelection(): void {
  const reasonControl = this.unableToScanForm.get('reasonType');
  if (!reasonControl) return;

  reasonControl.valueChanges
    .pipe(startWith(reasonControl.value)) // 立即触发初始值检查
    .subscribe(value => {
      this.showAdditionalInfo = value === 'Other'; // 选中Other显示，否则隐藏
    });
}

方法二：直接绑定控件值到模板（更简洁） #

无需订阅valueChanges，直接在模板中判断控件的实时值，省去额外变量维护：
修改输入框的*ngIf条件：

<div class="form-group row" *ngIf="unableToScanForm.get('reasonType')?.value === 'Other'">

两种方法都能解决首次选择“Other”不触发的问题，方法二更简洁，适合简单场景；方法一适合需要在值变化时执行额外逻辑的场景。

内容的提问来源于stack exchange，提问作者DZF