textarea binding with dropdown angular 2

Question

I have a textarea and one dropdown. I want whatever string i enters in textarea, that string will appear in the drop-down as an option. Suppose if I enter in textarea as 'zcxvbnuyt', then after pressing 'enter', this string would make the drop-down option.

And the choices I have to send on server must have a string with \n as separator between multiple choices.

Here is my HTML file:

app.component.html

<div class="col-sm-6">
     <textarea rows="4" 
               cols="50"
               class="form-control input-sm" 
               id="Choices" 
               [(ngModel)]="model.Choices">
     </textarea>
 </div>


<div class="col-sm-6">
     <select class="form-control input-sm" 
          [(ngModel)]="model.DefaultValue" 
          [ngModelOptions]="{standalone: true}"
          required>
          <option *ngFor="let c of defaultOptions" [ngValue]="c.value">{{c.value}}</option>
     </select>
</div>

app.component.ts

 export class model{
            Choices: string;
            DefaultValue:string;
    }

 defaultOptions= [
                { value: 'dummy1' },
                { value: 'dummy2' }
        ];

Can you add your typescript code as well..!

Dheeraj Kumar
– Dheeraj Kumar

2017-09-07 11:31:55 +00:00
Commented Sep 7, 2017 at 11:31 — Dheeraj Kumar
– Dheeraj Kumar, Commented Sep 7, 2017 at 11:31
@DheerajKumar, i have updated my typescript file.

Er Vipin Sharma
– Er Vipin Sharma

2017-09-07 11:44:11 +00:00
Commented Sep 7, 2017 at 11:44 — Er Vipin Sharma
– Er Vipin Sharma, Commented Sep 7, 2017 at 11:44

Rajiv · Accepted Answer · 2017-09-07 15:10:38Z

1

HTML

<div class="col-sm-6">
<textarea rows="4"
    cols="50"
    class="form-control input-sm"
    id="Choices"
    (keypress)="checkForNewLine($event.keyCode)" [(ngModel)]="model.Choices">
</textarea>
</div>


<div class="col-sm-6">
<select class="form-control input-sm"
[(ngModel)]="model.SelectedValue"
[ngModelOptions]="{standalone: true}"
required>
    <option *ngFor="let choice of defaultOptions" [ngValue]="choice.value">{{choice.value}}</option>
</select>

typescript

checkForNewLine(keycode){
if (keycode === 13 || keycode == 8 || keycode == 46){
    this.defaultOptions = [];
    let tmp = model.Choices.split('\n');
    tmp.forEach((data, index) => {
            this.defaultOptions.push({value: data});
        });
}

edited Sep 7, 2017 at 15:10

answered Sep 7, 2017 at 12:32

Rajiv

4574 silver badges12 bronze badges

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

2 Comments

Er Vipin Sharma Over a year ago

It's working fine while adding. But also what I want is, while removing the string from the textbox(by pressing backspace/delete), then from the dropdown, that string should also be removed.

Rajiv Over a year ago

thanks for updating my code. made the changes. It should work with backspace and delete key now.

Collectives™ on Stack Overflow

textarea binding with dropdown angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related