Question

我有一个要求，即我的UI中有多个文本框和下拉字段。当多个字段中的一个具有值时，我需要在UI上启用按钮。我正在根据为这些字段给出的ngModel值调用一个函数，但不知何故，当选择下拉列表时，禁用属性值永远不会根据值更改，它始终是相同的旧值，属性值不会更改。

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>

根据角度2中的文本字段值禁用按钮

1 个答案: