HTML dropdown list with the ability to add a custom value in Angular 2

Question

I have the following use case

We present a hardcoded dropdown list to the user

Eg: Dropdown list with 4 choices say apple, orange, grape, pineapple and 'write your own'

If the user does not like those 4 choices, he/she can select the 'write your own' option from the drop down. Now the user is shown an input box where he/she can write their own fruit like say 'banana'.

How can I implement this with Angular 2 new forms module?

Please add the code that demonstrates what you're trying to accomplish. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 22, 2016 at 5:42

Filip Lauc · Accepted Answer · 2016-07-22 11:30:12Z

3

I think this should work for you

HTML:

    <select *ngIf="!showAdditional" [(ngModel)]="mySelect" name="mySelect" (ngModelChange)="custom()">
        <option *ngFor="let o of options" [value]="o">{{o}}</option>
    </select>
    <input *ngIf="showAdditional" type="text" [(ngModel)]="additionalOption" name="additionalOptions" />

Ts:

export class SomeComponent {
    mySelect: string; 
    options: string[] = ['apple', 'orange', 'grape', 'write your own'];
    additionalOption: string;
    showAdditional: boolean = false;

    custom() {
        if (this.mySelect === 'write your own') this.showAdditional = true;
    }
}

So if the user wants to add a custom option you hide the select and show the input. You can add additional validation for angular 2 forms this is just the bare set up.

answered Jul 22, 2016 at 11:30

Filip Lauc

3,0291 gold badge19 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

HTML dropdown list with the ability to add a custom value in Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related