Angular中获取单选框值及实现英寸/厘米单位转换问题

一、修复表单绑定核心问题 #

你的表单存在输入未绑定ngModel、单选框label关联错误的问题，先修正HTML代码：

<!-- 确保所在模块已导入 FormsModule，否则 ngModel 无法生效 -->
<form (ngSubmit)="saveMeasurement()" #measurementForm="ngForm">
  <div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-default">Letter</span>
    </div>
    <!-- 绑定输入框到组件模型 -->
    <input 
      type="text" 
      class="form-control"
      name="Letter"
      placeholder="A"
      [(ngModel)]="measurementModel.letter">
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">in or cm</span>
    </div>
    <!-- 绑定数值输入框到组件模型 -->
    <input 
      type="number" 
      class="form-control"
      name="measurementInput"
      step=".01"
      [(ngModel)]="measurementModel.inputValue">

    <div class="input-group-append">
      <span class="input-group-text">
        <input 
          type="radio"
          id="in"
          name="measurementType"
          value="in"
          [(ngModel)]="measurementModel.measurementType"
          checked>
        <label for="in">in</label>
        <!-- 修正cm单选框的label关联，之前错绑成in -->
        <input 
          type="radio"
          id="cm"
          name="measurementType"
          [(ngModel)]="measurementModel.measurementType"
          value="cm">
        <label for="cm">cm</label>
      </span>
    </div> 
  </div>
  <!-- 添加提交按钮 -->
  <button type="submit">保存数据</button>
</form>

二、修正组件逻辑错误 #

1. 定义表单数据模型

在组件类内声明对应的数据模型，确保能获取表单输入：

// 组件类内部
measurementModel = {
  letter: '',
  inputValue: 0,
  measurementType: 'in' // 和HTML默认选中状态保持一致
};

2. 修正转换公式与核心逻辑

你之前的单位转换公式搞反了，且初始化时调用checkType()会导致拿不到实时输入，调整如下：

// 修正英寸转厘米公式：英寸*2.54=厘米
convertToCm(inches: number): number[] {
  const centimeters = inches * 2.54;
  return [centimeters, inches];
}

// 修正厘米转英寸公式：厘米/2.54=英寸
convertToIn(centimeters: number): number[] {
  const inches = centimeters / 2.54;
  return [centimeters, inches];
}

// 依据选中的单位生成转换后的数据
checkType(): Measurment {
  let measurement: Measurment | null = null;
  const inputVal = this.measurementModel.inputValue;
  const selectedType = this.measurementModel.measurementType;

  if (selectedType === 'in') {
    measurement = this.createMeasurement(this.convertToCm(inputVal));
  } else if (selectedType === 'cm') {
    measurement = this.createMeasurement(this.convertToIn(inputVal));
  }

  // 避免返回空值，兜底生成默认数据
  return measurement || new Measurment('', 0, 0);
}

// 封装测量数据
createMeasurement(measurements: number[]): Measurment {
  const letter = this.measurementModel.letter;
  // 确保与Measurment类的构造参数顺序匹配（字母、厘米值、英寸值）
  return new Measurment(letter, measurements[0], measurements[1]);
}

// 提交时才生成最新数据并发送请求
saveMeasurement() {
  if (this.measurmentId === -1) {
    const createdMeasurement = this.checkType();
    // 验证数据有效性，避免提交空值
    if (createdMeasurement.letter && createdMeasurement.inputValue) {
      this.measurementService.createMeasurement(createdMeasurement).subscribe(
        data => {
          console.log('保存成功:', data);
          // 保存后重置表单
          this.measurementModel = { letter: '', inputValue: 0, measurementType: 'in' };
        },
        error => {
          console.error('保存失败:', error);
        }
      );
    }
  }
}

3. 移除错误代码

删掉原生DOM获取单选框值的无效代码：

// 移除此行
type:string = (<HTMLInputElement>document.getElementById("measurementType")).value;

三、额外注意事项 #

• 确保模块已导入FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块
    FormsModule
  ]
})
export class AppModule { }

• 确认Measurment类的构造参数顺序正确，示例：

export class Measurment {
  constructor(public letter: string, public cm: number, public inches: number) {}
}

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