Toggle function on radio button click in bootstrap and angular 5

Question

I'm using Angular 6 and Bootstrap 4. I have this Bootstrap button group:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary">
        <input type="radio" [(ngModel)]="usecase" name="options" id="option1" [value]="customer"> Kundenzuordnung
    </label>
    <label class="btn btn-secondary">
        <input type="radio" [(ngModel)]="usecase" name="options" id="option2" [value]="stock"> Lagerware
    </label>
    <label class="btn btn-secondary">
        <input type="radio" [(ngModel)]="usecase" name="options" id="option3" [value]="internalUse"> Interne Verwendung
    </label>
</div>

I want a function to be called when a button is selected and I have tried all of the following methods/properties below:

(click)
onclick
onkeydown
ng-change
(ngModelChange)
left out value field

How can I call my function formChange(0) when the user selects a button?

You said "how can i call my function formChange(0), when the user selects another option". What another option? — Sergio Escudero
– Sergio Escudero, Commented May 7, 2018 at 21:48

Sithys · Accepted Answer · 2018-05-10 16:20:28Z

4

it was so easy... i had to add the (click) function to the label, not to the input.

answered May 10, 2018 at 16:20

Sithys

3,8018 gold badges37 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omkar Jadhav · Accepted Answer · 2018-05-16 06:50:07Z

1

Try this one , I think this will work.

 <form #form="ngForm" (ngSubmit)="logForm(form.value)">

    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="option1" value="customer" ngModel> Kundenzuordnung
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="option2" value="stock" ngModel> Lagerware
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="option3" value="internalUse" ngModel> Interne Verwendung
        </label>
    </div>

 </form>

answered May 16, 2018 at 6:50

Omkar Jadhav

6911 gold badge5 silver badges20 bronze badges

Collectives™ on Stack Overflow

Toggle function on radio button click in bootstrap and angular 5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related