角度2のフォームコントロールをリセットする方法

Question

ドロップダウンのリストがあり、ドロップダウンが変更されたときにそのボタンが表示されます。これを行うには、私はformcontrol汚い機能を使用しています。最初はボタンが隠されていて、ドロップダウンが汚れてしまったときはボタンを押します。

ボタンをクリックすると、残りのボタンはすべて元の値にリセットされた他のドロップダウンとともに非表示になります。どのようにこの仕事を達成するために、私の理解によると、汚いフィールドを不潔なものにする方法がないからです。

<div class="form-group"> 
           <h4 >Person {{i+1}}</h4> 
           <div > 
            <div ><label class="control-label">Position</label></div> 
            <div> 
             <select [ngModel]="staff.position" (ngModelChange)="newPosition=$event;btn.hidden=0" #select="ngModel" name="position" placeholder="position"> 
              <option *ngFor="let i of instituteObj.academic_staff;let i=index" [value]="i+1">{{i+1}}</option> 
             </select> 
            </div> 
            <div #btn [hidden]="!select.dirty" class="academic-move"><button (click)="changeStaffPosition(staff.position,newPosition);btn.hidden=1" type="button" class="btn btn-primary ">Move</button></div> 
           </div> 
          </div><br> 

と私のコンポーネントの機能は次のとおりです。

changeStaffPosition(currentPosition,newPosition){ 
    if(currentPosition < newPosition){ 
     for(let staff of this.instituteObj.academic_staff){ 
     if(staff.position > currentPosition && staff.position <= newPosition){ 
      --staff.position; 
     } 
     } 
     this.instituteObj.academic_staff[currentPosition-1]['position'] = newPosition; 
    } 
    else{ 
     for(let staff of this.instituteObj.academic_staff){ 
     if(staff.position >= newPosition && staff.position < currentPosition){ 
      ++staff.position; 
     } 
     } 
     this.instituteObj.academic_staff[currentPosition-1]['position'] = newPosition; 
    } 

    this.instituteObj.academic_staff.sort((a,b) => { 
     if(a['position']<b['position']){return -1} 
     if(a['position']>b['position']){return 1} 
     return 0; 
    }); 
} 

基本的に私が解決しようとしている問題は、すべてのリスト項目は、ドロップダウンを持っているドロップダウンを使用して、リストの順序を設定し、ユーザを作ることです、ユーザが位置を選択して移動ボタンをクリックすると、リストは新しい順序で並べ替えられます。

Answer 1

あなただけ見て、これは新しい形でのみ使用できますが、最初

@ViewChild('select') select; 

... 

this.select.markAsPristine(); 

のようにコントロールへの参照を必要とするコンポーネントクラスからそれを行うにはAbstractControl.markAsPristing()

select.markAsPristine(); 

使用を呼び出すことができますRC.4のモジュール。 ドキュメントにはまだこれが表示されていません。多分それだけで、フォームを再作成するのが一般的であった以前のバージョンでこの問題を回避するRC.5 https://github.com/angular/angular/blob/3f08efa35dd334c61127fc8059b4d73b2bd0b866/modules/%40angular/forms/src/model.ts#L144

で利用可能になる、*ngIf="showForm"とそれを包むことにより、例えば、最初trueにshowFormを設定。バック（ChangeDetectorRefを注入し、その上にdetectChanges()を呼び出すことによって）再びtrue呼び出し変化検出