textarea 与下拉菜单绑定 angular 2

Question

我有一个文本区域和一个下拉菜单。我想要我在 textarea 中输入的任何字符串，该字符串将作为一个选项出现在下拉列表中。假设我在textarea中输入'zcxvbnuyt'，然后在按下'enter'后，这个字符串就会成为下拉选项。

我必须在服务器上发送的选项必须有一个字符串，其中 \n 作为多个选项之间的分隔符。

这是我的 HTML 文件：

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' }
        ];

Answer 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});
        });
}

textarea 与下拉菜单绑定 angular 2

textarea binding with dropdown angular 2

angular2-forms

angular2-directives

angular2-template

angular