Angular Material: How to hide input field based on checkbox

Question

I have a checkbox cbAddVestingOption that, when checked, should display an input field.

<mat-form-field style="width: 600px">
                  <mat-checkbox [formcontrolname]="cbAddVestingOption" style="padding-bottom: 200px;">Add Vesting Option</mat-checkbox>
                  <input type="text" placeholder="Vesting Option" matInput formcontrolname="vestedoption" [matAutocomplete]="auto" class="uppercase" />
                  <mat-autocomplete #auto="matAutocomplete">
                    <mat-option *ngFor="let option of vestedOptions" [value]="option">
                      {{option}}
                    </mat-option>
                  </mat-autocomplete>
                </mat-form-field>

So when cbAddVestingOption is checked, vestedoption should display. When cbAddVestingOption is not c hecked, vestedoption should be hidden.

Do I need to do this in the typescript or can I do it in the html?

Trismuto · Accepted Answer · 2021-03-12 18:55:09Z

0

You can do it directly on the template like this:

  <mat-checkbox #checkbox>Add Vesting Option</mat-checkbox>
  <input type="text" placeholder="Vesting Option" matInput [hidden]="!checkbox.checked"/>

ADDED: A better option, using *ngIf on the whole <mat-form-field>:

<mat-checkbox #checkbox>Add Vesting Option</mat-checkbox>
<mat-form-field *ngIf="checkbox.checked" style="width: 600px">
    <input type="text" placeholder="Vesting Option" matInput formControlName="vestedoption" [matAutocomplete]="auto" />

edited Mar 12, 2021 at 18:55

answered Mar 11, 2021 at 23:39

Trismuto

4053 silver badges7 bronze badges

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

3 Comments

user1572713 Over a year ago

It didn't work. When I click the checkbox, the input is still there.

user1572713 Over a year ago

It still shows the bar that the autocomplete gives but the text does get hidden.

Trismuto Over a year ago

Yes, they are different elements, but you can use plain css for that. As another option, you can take the checkbox out of the <mat-form-field> and use *ngIf or css on it, see my updated answer.

Collectives™ on Stack Overflow

Angular Material: How to hide input field based on checkbox

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related