Zurücksetzen eines Formularsteuerelements in Winkel 2

Question

Wir haben eine Liste von Dropdowns und wenn ein Dropdownfeld geändert wird, werde ich einen Button an seiner Seite anzeigen. Um dies zu tun, verwende ich formcontrol dirty feature. Anfangs ist die Schaltfläche ausgeblendet, und wenn das Dropdown-Menü schmutzig wird, werde ich den Knopf drücken.

Sobald jedoch auf eine Schaltfläche geklickt wird, sollten alle verbleibenden Schaltflächen erneut ausgeblendet werden, während andere Dropdownlisten auf ihren Anfangswert zurückgesetzt werden. Wie kann ich diese Aufgabe erfüllen, denn meines Wissens gibt es keine Möglichkeit, ein schmutziges Feld untrüglich zu machen.

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

und meine Komponente Funktion sind:

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

Grundsätzlich ist das Problem, das ich zu lösen versuche, ist der Benutzer die Bestellung einer Liste mit den Dropdown-Listen gesetzt zu machen, wo jedes Listenelement ein Dropdown hat, Sobald der Benutzer eine Position auswählt und auf die Schaltfläche zum Verschieben klickt, wird die Liste mit neuer Reihenfolge neu angeordnet.

Answer 1

Sie rufen Gebrauch können AbstractControl.markAsPristing()

select.markAsPristine(); 

es von Ihrer Komponentenklasse Dazu müssen Sie einen Verweis auf das Steuerelement zunächst wie

@ViewChild('select') select; 

... 

this.select.markAsPristine(); 

Gerade gesehen, ist dies nur in den neuen Formen verfügbar Modul von RC.4. Die Dokumente zeigen dies noch nicht. Vielleicht wird es nur mit RC.5 verfügbar https://github.com/angular/angular/blob/3f08efa35dd334c61127fc8059b4d73b2bd0b866/modules/%40angular/forms/src/model.ts#L144

Als Abhilfe kann in früheren Versionen war es üblich, das Formular zu erstellen, zum Beispiel indem sie mit einem *ngIf="showForm" Einwickeln, setzte showForm zu true zunächst. Für neu zu erstellen, setzen Sie ihn auf false, Änderungserkennung aufrufen, setzen Sie es zurück zu true invoke Änderungserkennung wieder (durch ChangeDetectorRef Injektion und rufen detectChanges() drauf)