mardi 22 septembre 2020

setting false to [checkbox] DOM property not unchecking the checkbox in Angular

I am trying to uncheck Time in Loop checkbox when user clicks the stop radio button, but Time in Loop checkbox not unchecking.

Stackblitz url - https://stackblitz.com/edit/angular-ivy-s3ryzm?file=src/app/app.component.html

Steps to reproduce:

  1. Click GotoStream radio button.
  2. Select Time in Loop checkbox
  3. Click Stop radio button, Time in Loop checkbox must be unchecked, but it not unchecked.

Below is the template view.

<div class="form-group ml-3">
  <div class="radio">
    <label>
      <input type="radio" name="optradio" checked [disabled]="Stop" (change)="dropDownStream=true; timeInLoopChecked=false; timeInLoop=true; timeInLoopInput=true" >&nbsp;Stop
    </label>
  </div>
  <div class="radio" >
    <label class="float-left w-25 mt-2 mr-2">
      <input type="radio" name="optradio" [disabled]="goToStream" (change)="dropDownStream = false; timeInLoopChecked=false; timeInLoop=false; timeInLoopInput=true" >&nbsp;GotoStream
    </label>
    <select class="custom-select float-left" style="width: 70%;" [disabled] = "dropDownStream">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
</div>


<div class="form-group vertical-group ml-3" style="clear: both;">
  <div class="checkbox">
    <label class="float-left w-25 mt-2 mr-2">
      <input type="checkbox" value="" [checked]="timeInLoopChecked" [disabled]="timeInLoop" (change)="timeInLoopInput=!timeInLoopInput" >&nbsp;&nbsp;Time in Loop
    </label>
    <input class="float-left" style="width: 70%;" placeholder="0" type="text" class="form-control" id="streamName"  autocomplete="off" [disabled]="timeInLoopInput"/>
  </div>
</div>

Below is the component file:

export class AppComponent  {
  dropDownStream: boolean = true;
  timeInLoop: boolean = true;
  Stop: boolean=false;
  goToStream: boolean = false;
  timeInLoopInput: boolean = true;
  timeInLoopChecked: boolean = false;
}

How to make Time in Loop checkbox gets unchecked when user clicks stop radio button?

Thanks, Mohan




Aucun commentaire:

Enregistrer un commentaire