基於角度2中的文本字段值禁用按鈕

Question

我有一個要求，其中有多個文本框和下拉字段在我的用戶界面。當多個字段中的一個具有值時，我需要在UI上啓用按鈕。我正在根據爲這些字段給出的ngModel值調用一個函數，但不知怎的，當選擇下拉列表時，disable屬性值不會根據這些值進行更改，它始終是舊值，屬性值不會更改。

HTML代碼是這樣

<button [disabled]="searchButtonStatus(x,y, z, a, b, 
      c, d, e, f, g, 
       h, i, j)" </button> 






<tbody class="position cell-height"> 
    <tr> 
     <td class="empty-cell" id="checkbox" ></td> 
     <!--Funding status--> 
     <td class="input-cell" id="status"> 
     <div class="dropdown"> 
      <select [(ngModel)]="x" (ngModelChange)="onSelectStatus(selectedStatus)" name="status" 
        class="form-control form-textbox input-sm"> 
      <option *ngFor="let statoption of options" [value]="x" >{{ x}}</option> 
      </select> 
     </div> 
     </td> 
     <!--Loan certification--> 
     <td class="empty-cell input-cell" id="certified"> 
     <div class="dropdown "> 
      <select [(ngModel)]="y" (ngModelChange)="onSelectCertStatus(selectedCertStatus)" name="certStatus" 
        class="form-control form-textbox input-sm" style="width: auto;"> 
      <option *ngFor="let z of certOptions" [value]="z" >{{ certoption }}</option> 
      </select> 
     </div> 
     </td> 
     <!--Manual hold--> 
     <td class="empty-cell" id="hold"> 
     <div class="dropdown" style=""> 
      <select [(ngModel)]="selectedHold" (ngModelChange)="onHoldFilter(selectedHold)" name="selectHold" 
        class="form-control form-textbox input-sm" style="width:auto;"> 
      <option *ngFor="let holdoption of holdOptions" [value]="holdoption" >{{ holdoption }}</option> 
      </select> 
     </div> 
     </td> 
     <!--Batch ID--> 
     <td class="input-cell"> 
     <input class="form-control form-textbox input-text" 
       id="requestID" [(ngModel)]="a" name="batch"> 
     <span class="glyphicon glyphicon-search search-glyph"></span> 
     </td> 
     <!--Seller Number--> 
     <td class="empty-cell" id="seller"> 
     <input class="form-control form-textbox input-text " name="serialNo" 
       id="sellerNumber" [(ngModel)]="b" style="width: 100%;"> 
     <span class="glyphicon glyphicon-search search-glyph"></span> 
     </td> 

     <td class="input-cell"> 
     <input type="text" class="form-control form-textbox input-text" id="lender_name" 
       [(ngModel)]="c" name="c" style="width: 100%;"> 
     <span class="glyphicon glyphicon-search search-glyph"></span> 

     </td> 

     <td> 
     <input class="form-control form-textbox input-text" 
       id="d" [(ngModel)]="d" name="d" style="width: 100%;"> 
     <span class="glyphicon glyphicon-search search-glyph"></span> 
     </td> 

     <td> 
     <input class="form-control form-textbox input-text" id="e" 
       [(ngModel)]="e" name="e"> 
     <span class="glyphicon glyphicon-search search-glyph"></span> 
     </td> 

     <td class="input-cell"> 
     <my-date-range-picker name="ngModelDateRange" id="sub_dt" [options]="myDateRangePickerOptions" 
           [(ngModel)]="f"></my-date-range-picker> 
     </td> 

     <td class="input-cell"> 
     <my-date-range-picker name="ngModelDateRange" id="schd_fnd_dt" [options]="myDateRangePickerOptions" 
           [(ngModel)]="g"></my-date-range-picker> 
     </td> 


     </div> 
     </td> 

而就禁止財產我調用這個函數總是返回相同的值

searchButtonStatus(fndgStatTyp,lnCrtfnStatTyp,fndgHldInd,fndgSmssBchId, prtyRoleAltId, 
        lglEntyFullNme, ddfLnId, lnAltId, uiFndgSmssDttm, uiFndgSchdDt, 
        busEvntTypEffDt, finsDwlTyp, fndgColtUpbAmt){ 
    const value:Boolean = !(fndgStatTyp == null || lnCrtfnStatTyp ==null || fndgHldInd == null ||fndgSmssBchId == null || prtyRoleAltId == null || 
     lglEntyFullNme == null || ddfLnId == null || lnAltId == null || uiFndgSmssDttm == null || uiFndgSchdDt == null || 
    busEvntTypEffDt == null || finsDwlTyp == null || fndgColtUpbAmt == null) 
    return value; 
    } 

Answer 1

我創建了一個Plunker，改變了一些代碼。

<option *ngFor="let statoption of options" [value]="x" >{{ x}}</option> 

到：

<option *ngFor="let statoption of options" >{{ statoption}}</option>