javascript - change - radio button angular 4
Angular2: evento de cambio RadioButton no es vinculante (3)
Con Angular 2 RC2 ya no es necesario crear RadioButtonState:
Los botones de radio ahora pueden compartir la instancia de FormControl
<form #f="ngForm">
<input type="radio" name="food" [(ngModel)]="food" value="chicken">
<input type="radio" name="food" [(ngModel)]="food" value="fish">
</form>
Y:
class MyComp {
food = ''fish'';
}
Fuente: 5thingsangular - Edición # 8
Aquí, simplemente quiero vincular RadioButton con evento de cambio. No usando ninguna biblioteca.
Siguiente funciona bien.
<input type="radio" name="test" value="A" (change)="onPropertyChange(''test'')">
<input type="radio" name="test" value="B" (change)="onPropertyChange(''test'')">
Pero este no es:
<div class="btn-group col-lg-2" data-toggle="buttons" >
<label *ngFor=" let app of applications; let i = index; "
class="btn btn-default " [ngClass]="{''active'':( ticket.app == app)}">
<input type="radio" id="app{{i}}" name="app" value="{{i}}"
checked="{{ ( ticket.app == app ) ? ''checked'' : ''''}}" (change)="
onPropertyChange(''app'')" >
{{app}}
</label>
</div>
Mientras enlazo change event to label, me está dando un valor antiguo.
¿Alguien puede sugerir un enfoque correcto?
Gracias por adelantado...!!!
Usando ng2-bootstrap,
<div class="btn-group col-lg-2">
<label *ngFor="let app of applications" class="btn btn-default" [(ngModel)]="ticket.app" btnRadio="{{app}}">{{app}}</label>
</div>
En archivo .ts,
Se agregó la
import { ButtonRadioDirective } from ''ng2-bootstrap/components/buttons'';
En la anotación
@Component
, la pasó comodirectives: [ButtonRadioDirective]
.
Funciona bien. Espero que funcione para ti.
Enlace de dos vías sin una biblioteca:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default" [class.active]="yourVariable==item" (click)="yourVariable=item" *ngFor="let item of items">
<input type="radio" style="display: none;" name="radios" [(ngModel)]="yourVariable" [value]="item" [checked]="yourVariable==item" />
{{yourLabelText}}
</label>
</div>