2017-01-04 6 views
5

i最初のオプションをハードコードしたものを1つ選択して、プレースホルダーとオブジェクトの一覧を表示します。クリアをクリックすると、選択を最初のオプションにリセットする必要があります。ここでそれをすることができない、方法はありますか?リセット方法既定値に戻すAngular2

 <select class="form-control" aria-placeholder="Select File" style=" margin-right:5px;padding:0px;width:400px" [(ngModel)]="ddlFileId" (change)="loadFiles($event.target.value)" [ngModelOptions]="{standalone: true}" > 
        <option [value]="''" disabled selected>Select File</option> // this will appear like a place holder 
        <option *ngFor="let file of AllFileIDS" [value]="file.FileID" [ngValue]="file.FileID">{{file.FileID}}</option> 
     </select> 

iは、空のデータソースを作ら

this.ddlFileId = ""; 

マイ試み

  • を試み、それが
  • は、[(ngmodel)]
  • 代わりに "" の値を与えた割り当て直し
  • フラグを追加して、それを [割り当て済み]に割り当てようとしましたorking

これを辞書にして最初のオブジェクトをフラグに設定して最初のオブジェクトを追加する以外の方法はありませんか?

その他のSOの質問は私に

+0

それは私が "ファイルを選択"しようとしていなかった –

+1

"無効に"を削除して参照してください?デフォルトのhtmlの動作である可能性があります – zerohero

答えて

2

を助けるdidntは私はあなたがあなたのフォームをリセットする方法を正確にわからないんだけど、私は再設定に苦労しましたが、同様の角2に戻ってデフォルト値に選択します。しかし、私は値のいくつかのカスタム設定で動作するようになっている。私のシナリオでは、私の選択のためのデフォルト値として0を使用しましたが、私は試してみました。 0のデフォルトと空の文字列のデフォルトを以下のように入れ替えました。私はバインディング[値]を使用していませんでしたが、単なる引用符ではなく、通常の値を使用しました。二重引用符ではありません。

<select id="selectSchool" [disabled]="user.roleId>2" class="form-control" [(ngModel)]="model.schoolId" name="schoolid" required (ngModelChange)="onSchoolChange($event)"> 
    <!--<option value="0" selected>Select School</option>--> 
    <option value='' disabled selected>Select File</option> 
    <option value="{{school.id}}" *ngFor="let school of schools">{{school.name}}</option> 
</select> 

私はViewChildを使用して、私のcomponent.tsファイルに自分の形で引っ張っ:

コンポーネント内の変数にフォームを設定し
import { ViewChild, Component, OnInit } from '@angular/core'; 

export class UserComponent { 
    @ViewChild("f") 
    f: NgForm; 

HTMLでの私のフォームタグテンプレートは次のようになります:

<form name="form" class="form-horizontal" (ngSubmit)="f.form.valid && submit()" #f="ngForm" novalidate> 

サブミット後にフォームをクリアするサブミット機能

submit(): void { 
    // my submit code.... 

    // reset form 
    this.f.resetForm(); 

    // After the reset, the selects will be cleared to nulls 
    // even setting the model values back to '' or 0 does not rebind them. (seems like a bug) 
    // but setting the form values back manually works. 
    this.f.form.controls.schoolid.setValue(''); // <--- Here is resetting a select back to a default '' value 
    this.f.form.controls.active.setValue(true); 
    this.f.form.controls.roleid.setValue(0); // <-- Here is resetting a select back to a default 0 value 
    this.f.form.controls.radioGender.setValue("M"); 
} 
関連する問題