如何在引导程序模型中设置[(ngModel)]

Question

我想使用ngModel设置从下拉菜单中获取选定数据。这是我的模板：

<div class="btn-group"
dropdown>
<button id="button-basic"
dropdownToggle
type="button"
class="btn btn-outline-primary dropdown-toggle"
aria-controls="dropdown-basic"
[(ngModel)]="size"
ngDefaultControl 
>
Size
<span class="caret"></span>
</button>
<ul id="dropdown-basic"
*dropdownMenu
class="dropdown-menu"
role="menu"
aria-labelledby="button-basic"

>
<li role="menuitem">
<a class="dropdown-item" >
XS
</a>
</li>
<li role="menuitem">
<a class="dropdown-item" >
S
</a>
</li>
<li role="menuitem">
<a class="dropdown-item">
M
</a>
</li>

</ul>
</div>

这是我的变量：public size:string;

更新：我使用了选择选项

<select class="custom-select" [(ngModel)]="this.product.size" >
<option *ngFor="let size of sizeArray; let i = index"  >
{{size}}
</option>
</select>

Answer 1

引导部分

没有任何理由将NgModel放在引导程序菜单的锚元素上。菜单旨在将您重定向到网站中的某个位置，因此您不需要将其放在Form中的任何位置(NgModel自然存在的位置(。

不过，你可能想要的是https://getbootstrap.com/docs/4.0/components/forms/-示例选择部分

<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select [(ngModel)]="size" class="form-control" id="exampleFormControlSelect1">
<option>S</option>
<option>XL</option>
<option>XXL</option>
<option>etc</option>
</select>
</div>

角度形式模块部分

varundhariyal很好地回答了这个问题。不过，我将提供更多信息，说明为什么这一评论是正确的答案。

NgModel可以应用于FormControl FormControl实现。这基本上意味着，如果包含FormsModule，则可以在htmlinput和select标记上使用NgModel双向绑定。

如果你不能走任何其他的路，并且你真的必须并且需要使用上面的html，那么你需要创建你自己的CUSTOMFormControl。

这基本上意味着您需要使用ControlValueAccessor并创建自定义逻辑，描述从新的FormControl中设置值或检索值的含义。我不会在这里提供完整的解决方案，但基本上你必须在你的锚上创建点击事件来设置价值。您将需要实现writeValue，它必须应用正确的css，以便所选的li将是唯一可见的li，依此类推。

你可以在这里看到一个例子

你可以看到如何在这里的堆栈中为选择预先选择一个值

总之，您需要以下内容：

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
public sizeArray = ['SM', 'M', 'L', 'XL'];
public product = {
id: 1,
size: 'L'
};
}

在模型中设置一个具有预设值的变量。