CODEWITHSUNDEEP
angular
koque
koque

Reputation: 2256

Angular 2: radio buttons not working

I intend these to be two radio buttons such that a user can select one or the other. But they are both showing on the form as already checked and cannot be unchecked.

   

<div class="form-group">
      <label class="col-sm-12">
          <input type="radio" name="paymentType" id="paymentType" 
            [(ngModel)]="payment.paymentType"
            [value]="PayPal" required>
      </label>
    </div>
    <div class="form-group">
      <label class="col-sm-12">
          <input type="radio" name="paymentType" id="paymentType" 
          [(ngModel)]="payment.paymentType" 
            [value]="Credit" required>
        </label>
    </div>

Upvotes: 2

Views: 7196

Answers (1)

Peter Haddad
Peter Haddad

Reputation: 80904

<div class="form-group">
<label class="col-sm-12">
      <input type="radio" name="paymentType"
        [(ngModel)]="payment.paymentType"
        [value]="PayPal" required>
</label>
</div>

<div class="form-group">
<label class="col-sm-12">
      <input type="radio" name="paymentType"
      [(ngModel)]="payment.paymentType"
      [value]="Credit" required>
</label>
</div>

Remove the extra name in both radio buttons and [checked] binding, then both will be unchecked at first. Radios with the same name are in a radio group, so when you check one radio button the other will be unchecked.

Upvotes: 2

Related Questions