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

您可以致电使用AbstractControl.markAsPristing()

select.markAsPristine();

要从组件类中执行此操作，首先需要引用控件，如

@ViewChild('select') select;

...

this.select.markAsPristine();

刚看到，这只适用于RC.4的新表格模块。文档还没有显示出来。也许它仅适用于RC.5 https://github.com/angular/angular/blob/3f08efa35dd334c61127fc8059b4d73b2bd0b866/modules/%40angular/forms/src/model.ts#L144

作为以前版本的解决方法，通常会重新创建表单，例如首先使用*ngIf="showForm"包装，最初将showForm设置为true。要重新创建，请将其设置为false，调用更改检测，将其重新设置为true再次调用更改检测（通过注入ChangeDetectorRef并在其上调用detectChanges()）

如何以角度2

1 个答案: