web-dev-qa-db-ja.com

Angular select optionsコントロールは、オプションの配列を空にしてもngModel値を自動的にリセットしません

Angular 8.に非常に基本的な選択オプション入力コントロールがあります。ユーザーがドロップダウンから1つのアイテムを選択すると、ドロップダウンとngModel変数に正しく反映されます。

しかし、プログラムでソース配列を空にしても、ドロップダウンはngModelの古い値を保持し、angular検証はコントロールが「有効な」状態であることを示します。しかし、何もソース配列が空になっているため、ドロップダウンで選択されているように表示されます。

何も選択されていないため、ngModelをリセットし、コントロールを無効な状態にする必要があります。

私の期待は間違っていますか？それとも私は何か間違ったことをしていますか？

以下は、動作を再現する完全な例です。

Angular 8： StackBlitz

更新1：

Angular 1で例を作成しました。これは期待どおりに機能しています。オプション配列に一致するオプションが見つからない場合、AngularJSはモデル値をクリアします。私の考えは、ドロップダウンが空の場合ユーザーは何も選択されていないと想定しますが、Angular2 +の場合、その背後にある古いモデル値を保持します。

角度1： StackBlitz

angularangular2-ngmodelselect-options
2
user296526

私はあなたの予想では何か間違っていると思います、ドロップダウンリストを空にする必要はありません。 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>
_

実用的なデモ

0
coder

オプションのモデルと配列は、選択を空にするための設定が異なります。ngModelをリセットするか、ngModelを空白または ""に設定する必要があります。選択によってngModel値が設定されますが、配列へのリンクがないため、ngModelにはそれに設定された値が含まれます。配列を削除すると、ngModelが配列を参照せず、ドロップダウンによって設定された値を参照する値の配列を参照するため、選択の値は存在しません。

正常に動作しています。

1
Hitech Hitesh

配列を変更すると、ドロップダウン結合のモデルも変更されるのはなぜですか？モデルは、その値を含まないドロップダウンにバインドできます。その値を選択することはできませんが、値がドロップダウンの値にないため、モデルはnullになりません。

モデルの値を希望の値に手動で設定する必要があります。

Angular 1 stackblitzの場合、モデルにデフォルト値を指定すると、clear arrayによってクリアされません https://stackblitz.com/edit/angularjs-yia6a4?file = home/home.controller.js

1
Adrian Brand
    //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;

       }
0
Ashutosh Kushawaha

以下のようにしてみてください、

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();
0
Ininiv