Angular响应式表单仅Firefox正常渲染数据的跨浏览器问题

核心问题原因 #

1. 浏览器兼容性差异：<option>标签的(click)事件仅在Firefox中会被触发，Chrome、Brave等WebKit内核浏览器不支持该事件绑定，这是点击选项无响应的直接原因。
2. 代码笔误：getDevice()方法中this.createSolarGenerator Form.patchValue存在空格，应为this.createSolarGeneratorForm.patchValue，会导致运行时报错。
3. 表单控件不匹配：HTML中islandname下拉框的formControlName设为island_name，但表单定义中对应的控件名是island，两者不匹配会导致数据无法正确填充。
4. 嵌套订阅风险：嵌套的subscribe会增加异步逻辑复杂度，可能引发内存泄漏或数据时序问题。

修复步骤 #

1. 修复下拉框事件绑定 #

移除<option>上的(click)事件，改为在<select>的(change)事件中获取选中项ID并调用getDevice()：

<form [formGroup]="createSolarGeneratorForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="select_device">Select device</label><br />
    <select 
      name="deviceName" 
      (change)="onDeviceChange($event)" 
      formControlName="deviceName" 
      class="custom-select"
      id="deviceName" 
      required
    >
      <option 
        [value]="solar.deviceName" 
        *ngFor="let solar of solars; index as i"
      > 
        {{ solar.deviceName }}
      </option>
    </select>
  </div>
</form>

组件类中添加对应处理方法：

onDeviceChange(event: Event) {
  const selectedDeviceName = (event.target as HTMLSelectElement).value;
  const selectedSolar = this.solars.find(s => s.deviceName === selectedDeviceName);
  if (selectedSolar?.id) {
    this.getDevice(selectedSolar.id);
  }
}

2. 修正代码笔误与表单控件匹配 #

• 修复表单名称空格问题，并改用switchMap优化异步逻辑：

import { switchMap } from 'rxjs/operators';

// ...

getDevice(id: number) {
  this.solarService.getSolarGeneratorById(id).pipe(
    switchMap(selectedSolar => {
      this.selectedSolar = selectedSolar;
      return this.islandService.getIslandByName(selectedSolar?.island.islandName);
    })
  ).subscribe(islandResponse => {
    this.island = islandResponse[0];
    this.createSolarGeneratorForm.patchValue({
      currentPower: this.selectedSolar?.currentPower,
      temperatureIrradiance: this.selectedSolar?.temperatureIrradiance,
      island: this.island
    });
  });
}

• 修正islandname下拉框的formControlName与表单定义一致：

<div class="form-group">
  <label for="islandid">This device belongs to island</label><br />
  <select 
    name="islandname" 
    (change)="changeIslandId($event)" 
    formControlName="island"
    class="custom-select"
    id="islandname"
  >
    <option [selected]="true">{{ (selectedSolar)?.island.islandName}}</option>
  </select>
</div>

3. 补充错误处理（可选但推荐） #

在API服务中添加错误日志，便于排查问题：

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

// ...

getSolarGeneratorById(id: number) {
  let params = new HttpParams().set("id", id);
  return this.httpclient.get<SolarGenerator>(`${API_URL}/api/solarGenerator/find_by_id`, {params})
    .pipe(
      catchError(err => {
        console.error('获取Solar Generator失败:', err);
        return throwError(() => err);
      })
    );
}

（注：原API URL中的~可能是笔误，建议检查是否需要移除）

额外注意事项 #

• 确保所有表单控件的formControlName与组件中表单定义的键完全匹配。
• 测试时打开浏览器控制台（F12），查看是否有报错信息，快速定位问题。
• 若需绑定复杂对象到下拉框选项，建议使用[ngValue]替代[value]。

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