<select> 组件与 ngModel 的奇怪行为

Posted 2023-02-23

【中文标题】<select> 组件与 ngModel 的奇怪行为

【英文标题】：Strange behavior of <select> component with ngModel

【发布时间】：2019-05-07 03:28:25

【问题描述】：

我正在使用 Angular 6 开发一个 Web 应用程序。如果我创建一个模拟 html <select> 的自定义组件，当它被另一个组件引用时，我无法使其具有默认值！ 您可以在以下链接中找到（简单）应用程序代码：stackblitz here

在this question 我问当ngModel 存在时如何设置默认值（ <option> 的 selected 属性不再起作用！）。 如您所见，我的input-select 自定义组件 初始化value（链接到ngModel的值）。

value: any = 'default';

不幸的是，组件显示如下：

正如你在控制台中看到的，在提交的时候，打印这个：

我不希望出现这种情况：我想要一个带有预选值的组合框。我不明白这个应用程序有什么问题。

【参考方案1】：

你使用了ngModel，但没有绑定任何东西，所以 Angular 不知道它应该绑定什么值。您应该将ngModel 与包含默认值的property 绑定。

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
  <input-select
  name="name"
  [options]="my_options"
  [(ngModel)]="value"
  ></input-select>

  <input type="submit" value="Submit"/>
</form>

工作副本在这里 - https://stackblitz.com/edit/angular-qanpuu