CODEWITHSUNDEEP
angular
Gurkenkönig
Gurkenkönig

Reputation: 828

How to add "other" option to mat-select in Angular 5 / Material 2

I have a mat-select drop-down menu in angular 5. I would like to have an "other" option that, if selected, displays a text field with a manual input. How can I achieve this? My idea was to address another ngModel Boolean field, which then allows a *ng-if to display the text field, but even if it would work (I don't know how) it doesn't seem very elegant....

<mat-form-field>
    <mat-select [(ngModel)]="regime" name="regime-input">
        <mat-option [value]=1>daily</mat-option>
        <mat-option [value]=7>weekly</mat-option>
        <mat-option [value]=30>monthly</mat-option>
        <mat-option [value]=0>bei Bedarf</mat-option>
        <mat-option >other</mat-option>
    </mat-select>
</mat-form-field>

Upvotes: 1

Views: 6851

Answers (1)

Ingo B&#252;rk
Ingo B&#252;rk

Reputation: 20043

You can use a simple reference to show an input conditionally:

<mat-form-field>
    <!-- Notice the "#regimeWidget"! -->
    <mat-select [(ngModel)]="regime" name="regime-input" #regimeWidget>
        <mat-option [value]=1>daily</mat-option>
        <mat-option [value]=7>weekly</mat-option>
        <mat-option [value]=30>monthly</mat-option>
        <mat-option [value]=0>bei Bedarf</mat-option>
        <mat-option >other</mat-option>
    </mat-select>
</mat-form-field>

<ng-container *ngIf="!regimeWidget.value">
    <!-- Add your input here -->
    <span>You selected "Other"</span>
</ng-container>

This relies on the "other" option having an undefined (or null) value.

Upvotes: 6

Related Questions