CODEWITHSUNDEEP
angularangular-reactive-forms
hiba nebli
hiba nebli

Reputation: 117

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

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

Upvotes: 2

Views: 2253

Answers (2)

Darshan Malani
Darshan Malani

Reputation: 476

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>

Upvotes: 0

Emilien
Emilien

Reputation: 2761

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

Upvotes: 1

Related Questions