Disabled radio buttons when checkbox is false Angular 2

Question

I have a app in angular 2. There is a checkbox that when it is "false" others 2 radio buttons inside a radio group need to be disabled. But i don't know how to do this.

<div class="form-group" [ngClass]="{'has-error':!form3.controls['cadBanco'].valid && form3.controls['cadBanco'].touched}">
      <label class="col-sm-2 control-label">Cadastrar dados bancários?</label>
      <div class="input-group">
      <input formControlName="cadBanco" type="checkbox" value="1" [(ngModel)]="form3.cadBanco" (change)="disableBanco($event)">
      </div>
      </div><br />

    <div class="form-group" [ngClass]="{'has-error':!form3.controls['pessoa'].valid && form3.controls['pessoa'].touched}">
     <label class="col-sm-2 control-label">Tipo de pessoa:</label>
     <div class="input-group">
      <div class="btn-group" data-toggle="buttons" [class.invalid]="form3.controls['pessoa'].touched && !form3.controls['pessoa'].valid">
            <label class="btn btn-default active">
                <input type="radio"  [(ngModel)]="form3.pessoa"  formControlName="pessoa" value="1" [class.invalid]="form3.controls['pessoa'].touched && !form3.controls['pessoa'].valid"/> Pessoa jurídica
            </label> 
            <label class="btn btn-default">
                <input type="radio"  [(ngModel)]="form3.pessoa"  formControlName="pessoa" value="2" [class.invalid]="form3.controls['pessoa'].touched && !form3.controls['pessoa'].valid"/> pessoa física
            </label>
        </div>

      </div>
      <div *ngIf="form3.controls['pessoa'].hasError('required') && form3.controls['pessoa'].touched" class="alert alert-danger">Preencha o campo tipo de pessoa.</div>
     </div>

Answer 1

Try this:

<input formControlName="cadBanco" type="checkbox" [(ngModel)]="form3.cadBanco">

and

<input formControlName="pessoa" type="radio" [(ngModel)]="form3.pessoa" [attr.disabled]="form3.cadBanco === false || null">

I have added null here as well, because by default, before making a choice on the checkbox, the default value is null.

If you are using ngModel, and want to have the radio button disabled by default, you need to set the form3.cadBanco as false e.g in your ngOnInit or constructor, in case you are not using OnInit.

I have added the ngModel here as you have used it in your code. You actually don't need it (if you do not have another purpose for it), because you can access the value with your formcontrols.

The radio button disable could as well look like this:

[attr.disabled]="form3.controls.cadBanco.value == false || null"

...and skip the ngModel altogether. But maybe you knew this... since you have in your code used form3.controls... to check the validity... But in case you didn't I thought I would mention it :)