Angular2：具有单选按钮功能的复选框

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': ['']
     });
  }
}

Answer 1

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

Answer 2

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">