主页 / coding / 问题 / 79288606
Accepted
Reegan
Asked: 2024-12-18 00:10:47 +0800 CST

Angular 根据选择的单选按钮显示一些内容

  • 772

我有两个单选按钮。当我选择“部分付款”时，输入元素 formControlName="paidamount" 将与 <div class="formGroup" 一起显示在屏幕上。我使用了绑定，但这不起作用。

<mat-radio-group aria-label="Select an option" formControlName="fullypaid" [(ngModel)]="fullypaidvalue">
    <mat-radio-button value="true" [checked]="true">Fully Paid</mat-radio-button>
    <mat-radio-button value="false">Partially Paid</mat-radio-button>
  </mat-radio-group>
  <p>{{fullypaidvalue}}</p>
  <div class="formGroup" [class.d-none]="fullypaidvalue">
    <label for="paidamount" class="form-label" style="margin-top: 10pt;">Paid Amount</label>
    <input type="text" class="form-control form-control1" id="paidamount" formControlName="paidamount"
      placeholder="paidamount" name="paidamount" style="margin-left: 20pt;">
  </div>

在此处输入图片描述

我的 stackblitz 链接是 https://stackblitz.com/github/reegan2024/mygithubrepo?file=README.md

有人可以帮帮我吗

angular

2 个回答

  1. [(ngModel)] 或 formControlName 将单选按钮的值绑定为字符串（“true”或“false”），而不是布尔值（true 或 false）。您需要将变量转换为字符串：fullypaidvalue：string ='true' ;还要将 d-none 类的条件更改为： [class.d-none] =“fullypaidvalue =='true'”

    • 1
  2. Best Answer

    只需在模板中更改这些值：

    <mat-radio-button value="true" [checked]="true">Fully Paid</mat-radio-button>
<mat-radio-button value="false">Partially Paid</mat-radio-button>

    为了

    <mat-radio-button [value]="true" [checked]="true">Fully Paid</mat-radio-button>
<mat-radio-button [value]="false">Partially Paid</mat-radio-button>

    顺便提一下，我注意到您在同一个控件上使用 [(ngModel)] 和 formControlName。无需混合。您的表单已使用 ReactiveForms 模块构建，请保持这种状态。

    在您的组件中删除 [(ngModel)] 并用以下值替换您的绑定值：

    get fullypaidvalue(): boolean {
  return this.productFormarray.get('fullypaid')?.value;
}
    • 1

相关问题