각도 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의 모듈. 문서에 아직 표시되지 않습니다. 어쩌면 그것은 단지 *ngIf="showForm"로 포장하여, 예를 들어, 양식을 재현하는 것이 일반적이었다 이전 버전에서 해결 RC.5 https://github.com/angular/angular/blob/3f08efa35dd334c61127fc8059b4d73b2bd0b866/modules/%40angular/forms/src/model.ts#L144

으로 사용할 수있게, 처음 true에 showForm을 설정합니다. 다시 들어,