Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

467
Views
¿Cómo vincular correctamente los datos a los botones de radio en Angular2?

Tengo un componente con dos botones de opción, HTML se ve así:

 <div class="btn-group" id="ProfitCodes"> <div class="radio"> <label> <input type="radio" class="radio-inline" value="1" [checked]="model.ForeignCompany.ProfitCode === 1" [(ngModel)]="model.ForeignCompany.ProfitCode" id="point1" name="ProfitCode"><small>description</small> </label> </div> <div class="radio"> <label> <input type="radio" class="radio-inline" [(ngModel)]="model.ForeignCompany.ProfitCode" [checked]="model.ForeignCompany.ProfitCode === 2" value="2" id="point2" name="ProfitCode"><small>description</small> </label> </div>

Cuando hago clic en guardar y enviar el modelo al servidor, veo un valor seleccionado válido del botón de opción en el lado del servidor. Y este valor almacenado en la base de datos sin errores. Pero el botón de opción con el valor apropiado no se verifica después de vincular los datos. En devTools veo el primer botón de opción:

 <input class="radio-inline ng-untouched ng-pristine ng-valid" id="point1" name="ProfitCode" title="asdasda" type="radio" value="1" ng-reflect-name="ProfitCode" ng-reflect-value="1" ng-reflect-model="2" ng-reflect-checked="false">

Segundo botón de opción:

 <input class="radio-inline ng-untouched ng-pristine ng-valid" id="point2" name="ProfitCode" title="asd" type="radio" value="2" ng-reflect-name="ProfitCode" ng-reflect-value="2" ng-reflect-model="2" ng-reflect-checked="true">

Veo que los atributos angulares cambiaron y espero que se marque el segundo botón de opción. Pero esto no sucede. ¿Qué estoy haciendo mal?

about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Esto funciona en mi caso. [(ngModel)]

 <div class="radio"> <label> <input type="radio" value="1" [checked]="model.ForeignCompany.ProfitCode === 1" id="point1" (change)="onProfitSelectionChange(1)" name="ProfitCode"><small>description</small> </label> </div> <div class="radio"> <label> <input type="radio" value="2" [checked]="model.ForeignCompany.ProfitCode === 2" id="point2" (change)="onProfitSelectionChange(2)" name="ProfitCode"><small>description</small> </label> </div>

y el método TS se parece a:

 onProfitSelectionChange(entry): void { this.model.ForeignCompany.ProfitCode = entry; }
about 4 years ago · Santiago Trujillo Report

0

No necesita [checked] . Prueba con [(ngModel)] . Además, use [value]="1" en lugar de value="1"

 <input type="radio" name="Coverage" [value]="1" [(ngModel)]="formdata.coverage_verified" />Yes
about 4 years ago · Santiago Trujillo Report

0

<label *ngFor="let status of statuses"> <input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id"> <b>{{ status.name | i18n }}</b> </label>
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!