Início / coding / Perguntas / 79288606
Accepted
Reegan
Asked: 2024-12-18 00:10:47 +0800 CST

Angular para exibir algum conteúdo com base no botão de opção selecionado

  • 772

Tenho dois botões de opção. Quando seleciono "Parcialmente pago", o elemento de entrada formControlName="paidamount" será exibido na tela junto com <div class="formGroup". Usei binding, mas isso não está funcionando.

<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>

insira a descrição da imagem aqui

Meu link do stackblitz é https://stackblitz.com/github/reegan2024/mygithubrepo?file=README.md

Alguém pode me ajudar por favor

angular

2 respostas

  1. [(ngModel)] ou formControlName vincula o valor do botão de opção como uma string ("true" ou "false"), não como um booleano (true ou false). Você precisa transformar a variável em string: fullypaidvalue: string='true' ; Altere também a condição da classe d-none para: [class.d-none]="fullypaidvalue == 'true'"

    • 1
  2. Best Answer

    Basta alterar estes valores no modelo:

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

    para

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

    Como nota lateral, notei que você usa [(ngModel)] e formControlName no mesmo controle. Não precisa misturar. Seu formulário já foi criado usando o módulo ReactiveForms, mantenha-o assim.

    Remova [(ngModel)] e substitua seu valor vinculado por este, em seu componente:

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

relate perguntas