如何以角度2重置表单控件

Question

We have a list of dropdowns and when ever a dropdown is changed, I will show a button by its side. To do this, i am using formcontrol dirty feature. Initially the button is hidden, and when the dropdown becomes dirty, I will sho the button.

But once a button is clicked, all the remaining buttons should be hidden again along with other dropdowns reset to their initial value. How to accomplish this task, because as per my understanding there is no way to make a dirty field as undirty.

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

and my component function are:

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;
    });
}

Basically the problem i am trying to solve is to make the user set the ordering of a list using the dropdowns where every list item has a dropdown, once the user chooses a position and clicks move button, the list reorders with new order.

Answer 1

You can call use AbstractControl.markAsPristing()

select.markAsPristine();

To do it from your component class you need a reference to the control first like

@ViewChild('select') select;

...

this.select.markAsPristine();

Just saw, this is only available in the new forms module of RC.4. The docs don't show this yet. Maybe it only becomes available with RC.5 https://github.com/angular/angular/blob/3f08efa35dd334c61127fc8059b4d73b2bd0b866/modules/%40angular/forms/src/model.ts#L144

As a workaround in previous versions it was common to recreate the form, for example by wrapping it with an *ngIf="showForm" , set showForm to true initially. For recreating, set it to false , invoke change detection, set it back to true invoke change detection again (by injecting ChangeDetectorRef and call detectChanges() on it)