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

【问题标题】：Angular select options control does not reset ngModel value automatically even if I empty the array of options即使我清空选项数组，角度选择选项控件也不会自动重置 ngModel 值
【发布时间】：2019-12-12 03:25:56
【问题描述】：

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

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

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

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

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

Angular 8：StackBlitz

更新 1：

我在 Angular 1 中创建了一个示例，该示例完全符合我的预期。如果在选项数组中找不到匹配的选项，AngularJS 会清除模型值。我的观点是，如果下拉列表是空的，那么用户会假设没有选择任何内容。然而，在 Angular2+ 的情况下，它在幕后持有旧模型值。

角度 1：StackBlitz

【问题讨论】：

标签： angular angular2-ngmodel select-options

【解决方案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

【讨论】：

我的期望是基于它过去在 Angular 1 中的表现。我已经用 Angular 1 示例更新了我的问题，它按我的预期工作。
另外，我不会在真实应用程序中重置表单或清空数组。在实际代码中，我有一些逻辑来操作选项数组。因此，在某些时候，当前选定的项目可能在选项中不可用，如果没有明显选择任何内容，我希望控件进入无效状态。
更新了stackblitz请检查

【解决方案2】：

对于要清空的选择，模型和选项数组的设置不同，您必须重置或将 ngModel 设置为空白或“”。因为选择设置了 ngModel 值，但它没有指向数组的链接，所以 ngModel 包含设置给它的值。当您删除数组时，选择的值不存在，因为它是对值数组的引用，其中 ngModel 不引用数组，而是通过下拉设置它的值

它工作正常。

【讨论】：

在 Angular 1 的情况下，模型和数组相互连接。我已经用 Angular 1 示例更新了我的问题，该示例按预期工作。

【解决方案3】：

为什么您希望更改数组也会更改下拉键的模型？模型可以绑定到不包含其值的下拉列表。您无法选择该值，但模型不会变为 null，因为该值不在下拉列表的值中。

您需要手动将模型的值设置为您想要的值。

在你的 Angular 1 stackblitz 中，如果你给模型一个默认值，它不会被 clear 数组 https://stackblitz.com/edit/angularjs-yia6a4?file=home/home.controller.js 清除

【讨论】：

我的期望是基于它过去在 Angular 1 中的表现。我已经用 Angular 1 示例更新了我的问题，它按我的预期工作。
您不再使用 Angular 1，Angular 与 AngularJs 相比，很多东西都不同
在你的 Angular 1 StackBlitz 中尝试给它一个默认值 $scope.selectedPower = 'some value';你会看到同样的行为。

【解决方案4】：

    //suppose in app.component.html you have select list of agent, it works for me.

      <ng-select [multiple]="true" #chooseAgent
                 (selected)="selected($event)"
                 (removed)="removed($event)" *ngIf="agentLists" [items]="agentLists" bindLabel="name" bindValue="id" >
      </ng-select>


       and i have a reset button to reset the select list.

       <button type="button" class="btn btn-themegreen" (click)="Cancel()">Reset</button>



       //in app.component.ts

       import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
       import { NgSelectComponent } from '@ng-select/ng-select';

       //define variable.
       @ViewChild('chooseAgent', {static:false})
       ngSelectComponentAgent!: NgSelectComponent;
       agentLists: any[] = [];

       Cancel(){

           this.ngSelectComponentAgent.handleClearClick();
           this.agentLists.length=0;

       }

【讨论】：

【解决方案5】：

尝试如下，

HTML

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

组件

clearArray(form: FormGroup) {
    this.powers=[];
    form.reset();
  }

如果您只想重置电源，

form.controls.power.reset();

【讨论】：