引导程序部分

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/-“示例选择”部分

React.useEffect(() => {
    //your callback function can be executed here after the updatedValue updated
  }, [updatedValue]);

Angular FormsModule部分

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

NgModel可以应用于FormControl FormControl实现。这基本上意味着，如果包含FormsModule，则可以在html input 和 select 标记上使用NgModel两种方式绑定。

如果您别无选择，并且确实必须使用上述html，那么您需要创建自己的 CUSTOM FormControl。

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

您可以看到该here

的典范

您可以了解如何为选择at the stackblitz here

预先选择一个值

总而言之，您需要执行以下操作：

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

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

如何在引导模型中设置[（ngModel）]

1 个答案:

引导程序部分

Angular FormsModule部分