typescript - Disable a button based on text field values in angular 2 -

i have requirement there multiple text boxes , drop down fields in ui. need enable button on ui when 1 of multiple field has values. calling function based on ngmodel values given these fields somehow disable property value never changes based on values when drop down selected, same old value, property value not change.

html code goes

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

and on disable property call function returns same value

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

good day, have created plunker. changed code.

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

to <option *ngfor="let statoption of options" >{{ statoption}}</option> hope helps.have great day.