3

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

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

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

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

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

Angular 8：堆栈闪电战

更新1：

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

角度 1：StackBlitz

4

5 回答 5

2

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

因此，由于您在这里使用模板驱动的表单，您也可以通过使用reset()表单 ( heroForm) 的方法来重置表单状态，如下所示，无需更改任何内容：

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

工作演示

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

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

工作演示

于 2019-12-12T03:41:01.853 回答
1

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

它工作正常。

于 2019-12-12T03:36:53.940 回答
1

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

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

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

于 2019-12-12T03:37:06.430 回答
0

尝试如下，

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();
于 2019-12-12T04:35:32.873 回答
0 
    //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;

       }
于 2019-12-12T03:52:24.607 回答