我有以下用例
我们向用户呈现一个硬编码的下拉列表
例如:有 4 个选项的下拉列表,分别是苹果、橙子、葡萄、菠萝和“编写您自己的”
如果用户不喜欢这 4 个选择,他/她可以从下拉列表中选择“编写您自己的”选项。现在,用户会看到一个输入框,他/她可以在其中写下自己的水果,例如“香蕉”。
如何使用 Angular 2 新表单模块实现此功能?
最佳答案
我认为这应该适合你
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 表单添加额外的验证,这只是简单的设置。
关于javascript - HTML 下拉列表能够在 Angular 2 中添加自定义值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38518942/