如何以角度在编辑表单中填充单选按钮选定的值答案

【问题标题】：how to populate radio button selected value in edit form in angular如何以角度在编辑表单中填充单选按钮选定的值
【发布时间】：2024-01-01 08:14:01
【问题描述】：

我是角度新手，请帮助我。我尝试了很多，但未能在编辑表单中预填充单选按钮选择的值。请找到以下 HTML 代码：

HTML 代码：

<div class="col-md-6">
 <div class="col-sm">
  <fieldset class="form-group">``
       <div style="margin-top: 20px;">
           <label id="example-radio-group-label">Typical Service Cost Range</label>
    <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group radio-list"
     formControlName="service_cost"><br>
      <mat-radio-button class="example-radio-button radio-list"  value="Up to 10,000"> Up to 10,000  AED </mat-radio-button><br>
 <mat-radio-button class="example-radio-button radio-list"  value="Up to 50,000"> Up to 50,000  AED </mat-radio-button><br>
 <mat-radio-button class="example-radio-button radio-list" value="Up to 10,000"> Up to 100,000  AED </mat-radio-button><br>
 <mat-radio-button class="example-radio-button radio-list" value="Up to 104,000"> Up to 1004,000  AED </mat-radio-button><br>
  
       </div>
    <div *ngIf="customerForm.controls.service_cost.invalid && (customerForm.controls.service_cost.dirty || customerForm.controls.service_cost.touched || photo_submit)"
   class="">
 <div *ngIf="customerForm.controls.service_cost.errors.required"> Please select the Services cost range </div>
 </div>
</fieldset>`

在js中：

this.customerForm.controls['service_cost'].setValue(data.result.service_cost);

【问题讨论】：

标签： javascript angular forms edit

【解决方案1】：

您的代码中有两个主要错误。

首先，您已将checked 设置为所有单选按钮。这意味着将检查所有内容。

第二，你所有的单选按钮value都是一样的。哪个必须是唯一的。

所以，你mat-radio-group 的 HTML 将是：

<mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group radio-list" formControlName="service_cost"><br>
    <mat-radio-button class="example-radio-button radio-list" value="Up to 10,000"> Up to 10,000  AED </mat-radio-button><br>
    <mat-radio-button class="example-radio-button radio-list" value="Up to 50,000"> Up to 50,000  AED </mat-radio-button><br>
    <mat-radio-button class="example-radio-button radio-list" value="Up to 100,000"> Up to 100,000  AED </mat-radio-button><br>
    <mat-radio-button class="example-radio-button radio-list" value="Up to 500,000"> Up to 500,000  AED </mat-radio-button><br>
    <mat-radio-button class="example-radio-button radio-list" value="Up to 1,000,000"> Up to 1,000,000  AED </mat-radio-button><br>
</mat-radio-group>

并确保在 form 标签中使用 [formGroup]="customerForm"。

详情请参阅StackBlitz 的演示。

【讨论】：