*ngIf to show and hide div no longer working after applying data binding

Question

I have a form with a template that is used to either create a new form or load and edit an existing one. I've applied data binding to radio button fieldsets to have them toggled according to the data coming from the database. In doing that, the *ngIf's used to toggle other div's visibility no longer work for some reason.

Before (Visibility toggling works):

<div class="col-xs-12 col-sm-12">
    <fieldset>
        <input type="radio" formControlName="specificPilot" value="1" [ngClass]="{'td-radio-error': displayMessage.specificPilot}" (check)="radioSetValidator(changeForm.get('generalQuestionsFG.specificPilot'),[changeForm.get('generalQuestionsFG.pilotTransits')])">Yes
        <input type="radio" formControlName="specificPilot" value="0" [ngClass]="{'td-radio-error': displayMessage.specificPilot}" (check)="radioSetValidator(changeForm.get('generalQuestionsFG.specificPilot'),[changeForm.get('generalQuestionsFG.pilotTransits')])">No
        {{this.changeForm.get('generalQuestionsFG.specificPilot').value}}
    </fieldset>
</div>
<div class="col-xs-12 col-sm-12">
    <textarea class="form-control" rows="2" formControlName="pilotTransits" style="width:100%" placeholder="Provide Transits for Pilot(s)"
    *ngIf="changeForm.get('generalQuestionsFG.specificPilot').value==='1'"></textarea>
</div>

After (data binding works, but visibility toggling does not):

<div class="col-xs-12 col-sm-12">
     <fieldset>
          <input type="radio" formControlName="specificPilot" [value]="1" [ngClass]="{'td-radio-error': displayMessage.specificPilot}" (check)="radioSetValidator(changeForm.get('generalQuestionsFG.specificPilot'),[changeForm.get('generalQuestionsFG.pilotTransits')])">Yes
          <input type="radio" formControlName="specificPilot" [value]="0" [ngClass]="{'td-radio-error': displayMessage.specificPilot}" (check)="radioSetValidator(changeForm.get('generalQuestionsFG.specificPilot'),[changeForm.get('generalQuestionsFG.pilotTransits')])">No
          {{this.changeForm.get('generalQuestionsFG.specificPilot').value}}
     </fieldset>
</div>
<div class="col-xs-12 col-sm-12">
     <textarea class="form-control" rows="2" formControlName="pilotTransits" style="width:100%" placeholder="Provide Transits for Pilot(s)"
     *ngIf="changeForm.get('generalQuestionsFG.specificPilot').value==='1'"> </textarea>
</div>

Would someone be able to explain why the *ngIf checking the radio button control's value isn't working anymore? I added stubcode in to check if the value is changing properly and it is.

Answer 1

When you do <input value="1">, the value will be string "1".

When you do <input [value]="1">, the value will be number 1.

You are comparing with strict equality so it breaks.