Display a div if a checkbox is checked in reactive form with Angular

Question

I want to display a div if a my check box is checked. This my form :

 repairForm = new FormGroup({
  inftwoEuro : new FormControl(true),
  measurement : new FormControl('')
  })

HTML :

<form class="k-form k-form-inline " style="padding-top:7px; padding-left: 0px;"
            [formGroup]="repairForm">
            <div class="col-md-12 no-padding-left">
              <input type="checkbox" formControlName="inftwoEuro" kendoCheckBox >
            </div>
            <div *ngIf ="inftwoEuro" class="col-md-12 no-padding-left">
              <input kendoTextBox class="k-textbox form-control"
               formControlName="measurement">
              </div>
        </form>

Here the div is always not displayed even the checkbox is checked or not I don't know why

Value true assign on global variable then after use *ngIf conditions. — Darshan Malani
– Darshan Malani, Commented Jan 7, 2021 at 11:24

Emilien · Accepted Answer · 2021-01-07 09:28:49Z

1

Try with :

<div *ngIf="repairForm.get('inftwoEuro').value" class="col-md-12 no-padding-left">
  <input kendoTextBox class="k-textbox form-control" formControlName="measurement">
</div>

Juste here a working StackBlitz : https://stackblitz.com/edit/angular-ivy-3irrav?file=src/app/app.component.html

edited Jan 7, 2021 at 9:28

answered Jan 6, 2021 at 16:18

Emilien

2,7534 gold badges17 silver badges29 bronze badges

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

2 Comments

hiba nebli Over a year ago

Hi thanks for answering ! but it still not working !

Emilien Over a year ago

@hibanebli I edited my post and added a StackBlitz, please check

Darshan Malani · Accepted Answer · 2021-01-07 11:27:30Z

0

Ts File

inftwoEuro: any;

Inside constructor

constructor() {
this.inftwoEuro = false;
}

this.inftwoEuro = true;

HTML

<div *ngIf ="inftwoEuro" class="col-md-12 no-padding-left">
 <input kendoTextBox class="k-textbox form-control" formControlName="measurement">
</div>

answered Jan 7, 2021 at 11:27

Darshan Malani

4763 silver badges12 bronze badges

Collectives™ on Stack Overflow

Display a div if a checkbox is checked in reactive form with Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related