javascript - HTML 下拉列表能够在 Angular 2 中添加自定义值

Question

我有以下用例

我们向用户呈现一个硬编码的下拉列表

例如:有 4 个选项的下拉列表，分别是苹果、橙子、葡萄、菠萝和“编写您自己的”

如果用户不喜欢这 4 个选择，他/她可以从下拉列表中选择“编写您自己的”选项。现在，用户会看到一个输入框，他/她可以在其中写下自己的水果，例如“香蕉”。

如何使用 Angular 2 新表单模块实现此功能？

Answer 1

我认为这应该适合你

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" />

T:

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

因此，如果用户想要添加自定义选项，您可以隐藏选择并显示输入。您可以为 Angular 2 表单添加额外的验证，这只是简单的设置。