Question

我想在单选按钮中显示性别的值，当我这样做时[value] 但是当选择单选按钮并将其发送到我的API时，我获得的问题ID为“ on”值，请检查我的代码此HTML ---

  <div class="form-check">
                      <input #patientGender [(ngModel)]="patient.gender" name="gender"   class="form-check-input" type="radio"  [value] = "2"  />
                      <label class="form-check-label" > 
                        Female
                      </label>
                    </div>
                    <div class="form-check" >
                        <input #patientGender  [(ngModel)]="patient.gender"  name="gender" class="form-check-input" type="radio"   [value] = "1" />
                        <label class="form-check-label" >
                          Male
                        </label>
                      </div>
                </div>

检查ts文件

add(fname: string , email : string , mname : string , lname :string, DOB: Date, lastCheck:Date
     , status: number ,gender:number , Active :boolean   ): void {
       this.patientService.addPatient({ fname , email , mname , lname , DOB , 
      lastCheck , status , gender , Active} as Patient)
     .subscribe( patient => {
      this.patients.push(patient);
     });
  }

当显示正确的数据时，请选择正确的按钮，但是我要发送的数据发送的是“ on”值而不是1或2，我该如何解决此问题？

Answer 1

用[value]="1"和[value]="2"更改value="1"和value="2"。

原因：patientGender.value将读取实际DOM元素的value属性，这是您当前代码工作方式所需要的。

更好的选择：将数据从patient（您的模型，而不是HTML输入的值）传递到add，这很干净/有点棱角：

(click)="add(patient.name, patient.email, ...)"。

我还建议：

将此代码移动到组件脚本中的方法，例如addPatient()。）
创建一个Patient类型并传递该类型的单个对象，而不是每个患者字段都单独传递。

Answer 2

此post显示了问题。

访问：

{{ patient.gender }} <!-- html -->
this.patient.gender // controller

提供所需的值。

访问：

{{ patientGender.value }} <!-- html -->
 this.patientGender.value // controller

给你“上”

获取单选按钮的值，它发送“ on”而不是实际值

2 个答案: