时间戳

首页 > 解决方案 > 如何以角度在编辑表单中填充单选按钮选定的值

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

问题描述

我是角度新手，请帮助我。我尝试了很多，但未能在编辑表单中预填充单选按钮选择的值。请找到以下 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);

标签： javascriptangularformsedit

解决方案

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

首先，您已设置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>

并确保您使用[formGroup]="customerForm"您的form标签。

有关详细信息，请参阅StackBlitz上的演示。

推荐阅读