即使我清空选项数组，Angular 选择选项控件也不会自动重置 ngModel 值

Question

我在 Angular 8 中有一个非常基本的选择选项输入控件。用户从下拉列表中选择一项，它会正确反射(reflect)在下拉列表和 ngModel 变量中。

但如果我以编程方式清空源数组，下拉菜单仍将旧值保留在 ngModel 中， Angular 验证显示控件处于“有效”状态。但是，由于源数组现在为空，因此下拉列表中未显示任何选定内容。

我期望 ngModel 应该被重置并且控制应该处于无效状态，因为现在没有选择任何东西。

我的期望错了吗？还是我做错了什么？

以下是重现该行为的完整示例:

Angular 8:StackBlitz

更新 1:

我在 Angular 1 中创建了一个示例，它完全按照我的预期工作。如果在选项数组中找不到匹配的选项，AngularJS 会清除模型值。我的观点是，如果下拉菜单是空的，那么用户会认为没有选择任何内容。然而，对于 Angular2+，它在幕后保留着旧模型的值(value)。

Angular 1:StackBlitz

Answer 1

我认为你的期望有问题，不需要清空下拉列表。只需要像这样将 ngModel 设置为空值 model.power = ''。

因此，由于您在这里使用的是模板驱动表单，因此您也可以通过使用表单 (heroForm) 的 reset() 方法来重置表单状态，如下所示，不需要改变任何东西:

<button type="button" class="btn btn-default" (click)="heroForm.reset()">Clear Array</button>

Working DEMO

如果您需要清空下拉列表并且还需要将表单状态设置为无效状态，请像下面这样使用

<button type="button" class="btn btn-default" (click)="powers=[]; model.power=''">Clear Array</button>

根据您更新的问题，您可以像下面这样实现它:

<div class="form-group">
        <label for="power">Hero Power</label>
        <select class="form-control" id="power"
                required
                [(ngModel)]="model.power" name="power"
                #power="ngModel">
          <option [ngValue]="null">All</option>
          <option *ngFor="let pow of powers" [ngValue]="pow">{{pow}}</option>
        </select>
      </div>

      <button type="button" class="btn btn-default" (click)="powers=[]; model.power=null">Clear Array</button>

Working DEMO