Angular2: Checkbox with radio button functionality

Question

Can I get a guidance in implementing radio button functionality in checkbox using angular2 ? I tried with same name and ngModel, but not working

Here is my component.html

<form [formGroup]="conformityForm">     
   <table class="table table-bordered">
      <thead>
         <tr>
           <th>Evaluation</th>
           <th>Yes</th>
           <th>No</th>
         </tr>
      </thead>
      <tbody>
        <tr>
          <td>Do the staff have adequate qualifications for the tasks?</td>
          <td>
             <input type="checkbox" formControlName="IsAdequatequalificationsYes">
          </td>
          <td>
             <input type="checkbox" formControlName="IsAdequatequalificationsNo">
          </td>
        </tr>
      </tbody>
    </table>
 </form>

component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

  export class Test implements OnInit {
   conformityForm: FormGroup;
    constructor(private formBuilder: FormBuilder)      
      this.conformityForm = this.formBuilder.group({
        'IsInConvenienceYes': [''],
        'IsInConvenienceNo': ['']
     });
  }
}

Why implement checkbox when you want radio functionality? Seems counter intuitive — Huangism
– Huangism, Commented Jun 12, 2017 at 13:00
@AnnMary are you trying to do something like this stackoverflow.com/questions/36568126/… — visrey
– visrey, Commented Jun 12, 2017 at 13:09
@Huangism I need checkbox ui, but functionality seems to work like radio button. — AnnMary
– AnnMary, Commented Jun 13, 2017 at 5:39
@visery, Not like that.I just want two checkboxes, which act like radio button., i.e, only one checkbox to be checked at a time. — AnnMary
– AnnMary, Commented Jun 13, 2017 at 5:43

AVJT82 · Accepted Answer · 2017-06-13 09:34:24Z

2

EDIT:

I wasn't really thinking this true, so you did not want to disable the field when other checkbox is checked. But here is the solution for the radio button behavior. We are using the same variables yes and no, like below. Here we just patch the values with false and true that will uncheck the other if the other is checked. So change your template to this:

<input type="checkbox" (change)="yes.patchValue(true) ? yes.patchValue(true) : no.patchValue(false)" formControlName="IsAdequatequalificationsYes">
<input type="checkbox" (change)="no.patchValue(true) ? no.patchValue(false) : yes.patchValue(false)" formControlName="IsAdequatequalificationsNo">

PLUNKER

ORIGINAL ANSWER:

As a first comment I can say that the usual [disabled] doesn't work with reactive forms, so we need to do it in another way.

I like to shorten the form controls for better readability, here I have used variables yes and no, you maybe want to do some more suitable names? Anyway, they are defined in the TS like so:

this.yes = this.conformityForm.get('IsAdequatequalificationsYes');
this.no = this.conformityForm.get('IsAdequatequalificationsNo');

Then we add a change event to the form, where we check if the current checkbox is checked, if so, we disable the other one, and the other way around using the ternary operator. So do the following for the yes:

<input type="checkbox" (change)="yes.value ? no.disable() : no.enable()" formControlName="IsAdequatequalificationsYes">

and for the no we just change it to the opposite.

That should do it! :)

PLUNKER

edited Jun 13, 2017 at 9:34

answered Jun 13, 2017 at 7:42

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

8 Comments

AnnMary Over a year ago

Thanks AJT_82, I am getting an Error as " Type 'AbstractControl' is not assignable to type 'FormControl'. Property 'registerOnChange' is missing in type 'AbstractControl'."

AVJT82 Over a year ago

Where is this error thrown? Could you perhaps fork the plunker I provided and try to reproduce the issue? Can't pinpoint based on the error message as of where this error could reside.

AnnMary Over a year ago

error is thrown in:this.yes = this.conformityForm.get('IsAdequatequalificationsYes'); this.no = this.conformityForm.get('IsAdequatequalificationsNo');

AVJT82 Over a year ago

Well the plunker is working, have you checked and rechecked that it matches your code? :)

AnnMary Over a year ago

I think its due to Form control you declared.I have changed it to 'yes: any; no: any;' instead of ' yes: FormControl; no: FormControl;'

|

Юля Клепиковская · Accepted Answer · 2019-06-19 07:24:23Z

0

Also, you can use this option:

<input type="checkbox" (change)="yes.patchValue(true); no.patchValue(false);" formControlName="IsAdequatequalificationsYes">
<input type="checkbox" (change)="yes.patchValue(false); no.patchValue(true);" formControlName="IsAdequatequalificationsNo">

answered Jun 19, 2019 at 7:24

Юля Клепиковская

1

Collectives™ on Stack Overflow

Angular2: Checkbox with radio button functionality

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related