<div style="opacity: .9;text-align: center;background: #fcfbfb;position: relative;height: 90vh">
    <div class="row">
        <div class="col-12">
          <span style="color:#855353;font-size:20px;font-weight: 500;">Edit Device</span>
      </div>
    </div>
    <div id="toast">
      <div id="desc">{{ data_descip }}</div>
    </div>
  <div class="row" style="padding:25px;">
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      Device IMEI :
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="text" [(ngModel)]="dev_IMEI" name="IMEI">
      </md-form-field>

    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      Device name :
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="text" [(ngModel)]="dname" name="dname" required>
        <md-error class="pattern">Enter Device Name</md-error>
      </md-form-field>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      Description :
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="text" [(ngModel)]="desc" name="desc">
      </md-form-field>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left">
      SIM Number :
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="number" [(ngModel)]="sim" name="sim">
      </md-form-field>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      SIM Provider :
      <md-form-field class="example-full-width width" style="float:left;width: 90%;">
        <input mdInput type="text" [(ngModel)]="SIM_provider" name="hrdwr" placeholder="SIM Provider" required>
        <md-error class="required">Enter SIM Provider</md-error>
      </md-form-field>
    </div>
    <!-- =================================== EDIT SIM2 ==================================== -->
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left">
      SIM Number 2 :
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="number" [(ngModel)]="sim2" name="sim" placeholder="SIM 2">
      </md-form-field>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      SIM Provider 2:
      <md-form-field class="example-full-width width" style="float:left;width: 90%;">
        <input mdInput type="text" [(ngModel)]="SIM_provider2" name="hrdwr" placeholder="SIM Provider 2">
        <md-error class="required">Enter SIM Provider</md-error>
      </md-form-field>
    </div>

     <!-- =================================== EDIT SIM2 ==================================== -->
    <div class="col-sm-4"  style="padding-bottom:10px;text-align:left;">
        Integration ID:
      <md-form-field class="example-full-width width" style="float:left;width: 90%;">
          <input mdInput type="text" [(ngModel)]="IntegrationId" placeholder="Integration ID" >
          <!-- <md-error class="required">Enter Integration ID</md-error> -->
        </md-form-field>
  </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      Driver Name :
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="text" [(ngModel)]="drname" name="drname">
      </md-form-field>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      <!-- Vehicle type :  -->
      <!-- <md-select  name="neww" placeholder="Icon Type"[(ngModel)]="neww"  style="display: initial;">
        <md-option *ngFor="let foodd of foodds" [value]="foodd" >
          {{ foodd.viewValue }}
        </md-option>
      </md-select>  -->
      <!-- User :  -->
      Driver's Number :
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="number" [(ngModel)]="dcontact" name="dcontact" maxlength="10">
      </md-form-field>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      <!-- Groups :  -->
      Speed Limit :
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="number" [(ngModel)]="speed" name="speed">
      </md-form-field>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      <!-- Groups :  -->
      Total ODO :
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="number" [(ngModel)]="totalODO" name="totalODO">
      </md-form-field>
    </div>
    <div class="col-sm-4 col-md-4" style="margin-top:1px;;text-align:left;">
      <md-select placeholder="--Select Group--" [(ngModel)]="groupInfo" style="display: initial;">
        <md-option *ngFor="let group of groups" [value]="group">
          {{ group.GroupName }}
        </md-option>
      </md-select>
    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      <!-- Vehicle type :  -->
      <!-- <md-select name="neww" placeholder="Device Model" [(ngModel)]="deviceModel._id" (ngModelChange)="getDevmodel($event)" style="display: initial;">
        <md-option *ngFor="let model of newArr" [value]="model._id">{{model.device_type}}</md-option>
      </md-select> -->
<md-input-container>
  <input mdInput placeholder="Device Model" [mdAutocomplete]="tdAutoedit2" name="neww2" #state="ngModel"
    [(ngModel)]="deviceModel.device_type" (ngModelChange)="filterStates1(deviceModel)">
  <md-autocomplete #tdAutoedit2="mdAutocomplete">
    <md-option *ngFor="let model of dataSelect2" [value]="model.device_type">{{model.device_type}}</md-option>
  </md-autocomplete>
</md-input-container>

    </div>
    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;padding-top:1px;">
      <!-- <md-select name="neww1" placeholder="Vehicle types" [(ngModel)]="vehicleType._id" (ngModelChange)="getVehdata($event)" style="display: initial;">
        <md-option *ngFor="let vh of vehName" [value]="vh._id">{{vh.veh_type}}</md-option>
      </md-select> -->
  <md-input-container>
    <input mdInput placeholder="Vehicle types" [mdAutocomplete]="tdAutoedit1" name="neww1" #state="ngModel"
      [(ngModel)]="vehicleType.veh_type" (ngModelChange)="filterStatess(vehicleType)">
    <md-autocomplete #tdAutoedit1="mdAutocomplete">
      <md-option *ngFor="let vh of dataSelect1" [value]="vh.veh_type">{{vh.veh_type}}</md-option>
    </md-autocomplete>
  </md-input-container>




    </div>
    <div *ngIf="showFieldsDealer && !dealerStatus" class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;padding-top: 12px;">
      <span>{{'Dealer' | translate}} :</span>
      <md-input-container style="width: 60%;">
        <input mdInput placeholder="{{'Select dealer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
          #state="ngModel" [(ngModel)]="dealerData.fullName" (ngModelChange)="filtergrpStates3(dealerData.fullName)">
        <md-autocomplete #tdAuto0="mdAutocomplete">
          <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
            <!-- (click)="selectDealer(group._id)" -->
            <span>{{ group.fullName }}</span>
              <!-- {{ group.last_name }}</span> -->
          </md-option>
        </md-autocomplete>
      </md-input-container>
    </div>
    <div *ngIf="showFieldsUser" class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;padding-top: 12px;">
        <!-- <md-select name="neww2" placeholder="Users" [(ngModel)]="userModel._id" (ngModelChange)="getUserdata($event)" style="display: initial;">
            <md-option *ngFor="let userName of newUserArr" [value]="userName._id">{{userName.user_type}}</md-option>
          </md-select> -->
          <md-input-container>
            <input mdInput placeholder="Search User" [mdAutocomplete]="tdAutoedit" name="state" 
            #state="ngModel" [(ngModel)]="userModel.user_type"
           (ngModelChange)="filterStates(userModel)">
           <md-autocomplete #tdAutoedit="mdAutocomplete">
              <md-option *ngFor="let option of dataSelect" [value]="option.user_type">
                <span>{{ option.user_type }}</span>
              </md-option>
              <md-option *ngIf="costumers.length==0">
                <span>No Data Found</span>
              </md-option>
            </md-autocomplete>   
          </md-input-container>
    </div>
    


    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;"  *ngIf="((superadminAccess == 'ON')||(this.superAdmin==true))">
      Expiration Date :
      <owl-date-time [(ngModel)]="expDate" [hourFormat]="'12'" [autoClose]="true" [dateFormat]="'DD/MM/YYYY hh:mm:a'"></owl-date-time>
      <!-- <md-form-field class="example-full-width width">
        <input disabled mdInput type="text" [(ngModel)]="expDate" placeholder="Expiration Date ">
      </md-form-field> -->
    </div>

    <!-- -------------------------DEVICE DISTANCE VARIATION----------------------- -->
    <!-- <div class="col-sm-4 row" style="text-align: right;">
   
      <span>{{'Device Distance Variation' | translate}} :</span>
      <select style="height: 30px;" [(ngModel)]="selcetedSign">
        <option value="+">+</option>
        <option value="-">-</option>
      </select>
      <input mdInput
        style="background: #ececec;float: right;width: 53%;height: 30px;margin-left: 5px;border: 1px solid #c1c1c1;"
        type="number" id="name" [(ngModel)]="deviceDistanceVariation">
      <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
     
    </div> -->


    <div  class="col-sm-4 col-md-4 row"
      style="padding-bottom:10px;text-align:left;padding-top: 12px;">
    <span>{{'Device Distance Variation' | translate}} :</span>
      <div style="width: 60%;">
        <select style="height: 30px;" [(ngModel)]="selcetedSign">
          <option value="+">+</option>
          <option value="-">-</option>
        </select>
        <input mdInput
          style="background: #ececec;float: right;width: 75%;height: 30px;margin-top: -30px;margin-left: 5px;border: 1px solid #c1c1c1;"
          type="number" id="name" [(ngModel)]="deviceDistanceVariation">
          
      </div>
        <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
    </div>

    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
      Sales Person:
      <md-form-field class="example-full-width width" style="display: initial;">
        <input mdInput type="text" [(ngModel)]="sellsPerson" name="sellsPerson">
      </md-form-field>
    </div>

    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;padding-top:1px;">
      <md-input-container>
        <input mdInput placeholder="Installer" [mdAutocomplete]="tdAutoedit11" name="neww21" #state="ngModel"
          [(ngModel)]="installer" (ngModelChange)="filtergrpStatess12(installer)">
        <md-autocomplete #tdAutoedit11="mdAutocomplete">
          <md-option *ngFor="let vh of installerSelect" [value]="vh.fullName">{{ vh.first_name }} {{ vh.last_name }}</md-option>
        </md-autocomplete>
      </md-input-container>
    </div>

    </div>

<!-- style="width:95%" -->
    <div>
        <md-expansion-panel style="box-shadow: none;background: #fcfbfb;margin-top: 18px;">
          <md-expansion-panel-header>
            <md-panel-title style="font-size: 20px">
              Additional Settings
            </md-panel-title>
          </md-expansion-panel-header>
          <div class="additionalInputField">
            <div class="row" style="padding:25px;">
              <!-- <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
            <div class="row"> -->
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                <md-form-field class="example-full-width width" >
                  <input mdInput type="text" [(ngModel)]="EngineNo" placeholder="Engine Number">
                </md-form-field>
              </div>
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">          
                <md-form-field class="example-full-width width" >
                    <input mdInput type="text" [(ngModel)]="chassisno" placeholder="Chassis number">
                  </md-form-field>
              </div>
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                <md-form-field class="example-full-width width" >
                  <input mdInput type="text" [(ngModel)]="manufacturingCompany" placeholder="Manufacturing Company">
                </md-form-field>
              </div>
            <!-- </div>
            <div class="row" style="margin: 10px 0 46px 0;"> -->
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;" >
                <span>
                  <span>Registration date </span>
                  <owl-date-time [(ngModel)]="vehRegDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
                </span>
              </div>
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                <span>
                  <span>Date of Manufacturing Year</span>
                  <owl-date-time [(ngModel)]="vehManufacturingYear" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
                </span>
              </div>
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                <span>
                  <span>Last fitness date</span>
            <owl-date-time [(ngModel)]="lastFitnessDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
          </span>
              </div>
            <!-- </div>
            <div class="row"> -->
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;" >
                <span>
                  <span>Fitment Date</span>
                  <owl-date-time [(ngModel)]="fitmentDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
                </span>
              </div>
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                <md-form-field class="example-full-width width">
                  <input mdInput type="text" [(ngModel)]="iccidNo" placeholder="ICCICD Number">
                </md-form-field>
              </div>

              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                <!-- <span>{{'RTO Number' | translate}} :</span> -->
                <md-input-container class="example-full-width width">
                  <input mdInput placeholder="{{'Select RTO Number' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
                    #state="ngModel" [(ngModel)]="RTO" (ngModelChange)="filtergrpStatess2(RTO)">
                  <md-autocomplete #tdAuto0="mdAutocomplete">
                    <md-option *ngFor="let group of RTOSelect" [value]="group.RTO_Code">
                      <span>{{ group.RTO_Code }}</span>
                    </md-option>
                  </md-autocomplete>
                </md-input-container>
              </div>

              
            <!-- </div>
            <div class="row"> -->
                <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                    <md-form-field class="example-full-width width">
                        <input mdInput type="text" [(ngModel)]="UIDnumber" placeholder="Unique ID">
                      </md-form-field>
                </div>
                <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                  <md-form-field class="example-full-width width">
                      <input mdInput type="text" [(ngModel)]="CIDNO" placeholder="CID number">
                    </md-form-field>
              </div>
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                  <md-form-field class="example-full-width width" >
                      <input mdInput type="text" [(ngModel)]="typeofVeh" placeholder="Type of Vehicle">
                    </md-form-field>
              </div>
          <!-- </div>
          <div class="row"> -->
            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                <md-form-field class="example-full-width width">
                    <input mdInput type="text" [(ngModel)]="companyName" placeholder="Comapny Name">
                  </md-form-field>
            </div>
            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
              <md-form-field class="example-full-width width">
                  <input mdInput type="text" [(ngModel)]="companyAddress" placeholder="Company Address">
                </md-form-field>
          </div>
          <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
            <md-form-field class="example-full-width width" >
                <input mdInput type="text" [(ngModel)]="transportOfficeCity" placeholder="Transport Office City">
              </md-form-field>
        </div>
          <!-- </div>
          <div class="row"> -->
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;" >
                  <md-form-field class="example-full-width width">
                      <input mdInput type="text" [(ngModel)]="transportOfficeState" placeholder="Transport Office State">
                    </md-form-field>
              </div>
              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                  <span>
                      <span>Invoice Date</span>
                      <owl-date-time [(ngModel)]="invoice_date" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
                    </span>
              </div>
            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
              <md-form-field class="example-full-width width">
                  <input mdInput type="text" [(ngModel)]="invoice_number" placeholder="Invoice Number">
                </md-form-field>
          </div>
          <!-- </div>
          <div class="row"> -->
            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
              <!-- <md-form-field class="example-full-width width"> -->
                  <!-- <input mdInput type="number" [(ngModel)]="numberOfSOS" placeholder="Number of SOS"> -->
                  <md-select [(ngModel)]="numberOfSOS" placeholder="Number of SOS">
                    <md-option value="" selected disabled>Please select SOS</md-option>
                    <md-option value="1">1</md-option>
                    <md-option value="2">2</md-option>
                    <md-option value="3">3</md-option>
                    <md-option value="4">4</md-option>
                    <md-option value="5">5</md-option>
                    <md-option value="6">6</md-option>
                    <md-option value="7">7</md-option>
                    <md-option value="8">8</md-option>
                    <md-option value="9">9</md-option>
                    <md-option value="10">10</md-option>
                    <md-option value="11">11</md-option>
                    <md-option value="12">12</md-option>
                    <md-option value="13">13</md-option>
                    <md-option value="14">14</md-option>
                    <md-option value="15">15</md-option>
                  </md-select>
                <!-- </md-form-field> -->
                </div>
                <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                  <md-form-field class="example-full-width width">
                    <input mdInput type="text" [(ngModel)]="tpin" placeholder="t-pin">
                  </md-form-field>
                </div>
                <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
                  <md-form-field class="example-full-width width">
                    <input mdInput type="text" [(ngModel)]="epin" placeholder="e-pin">
                  </md-form-field>
                </div>
          <!-- </div> -->

          <!-- <div class="row"> -->
            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
              <md-form-field class="example-full-width width">
                <input mdInput type="text" [(ngModel)]="colour" placeholder="Colour">
              </md-form-field>
            </div>
            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
              <md-form-field class="example-full-width width">
                <input mdInput type="text" [(ngModel)]="models" placeholder="Model">
              </md-form-field>
            </div>
            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
              <md-form-field class="example-full-width width">
                <input mdInput type="text" [(ngModel)]="transmission" placeholder="Transmission">
              </md-form-field>
            </div>
            <div class="col-sm-3 col-md-3" style="padding-bottom:10px;text-align:left;">
              <md-form-field class="example-full-width width">
                <input mdInput type="text" [(ngModel)]="Imsi" placeholder="IMSI">
              </md-form-field>
            </div>
          </div>

        </div>
        </md-expansion-panel>
      </div>
  
  <!-- <md-dialog-actions align="end">
    <button md-button md-dialog-close>Cancel</button>
    <button md-button [md-dialog-close]="true" cdkFocusInitial>Install</button>
  </md-dialog-actions> -->
  <div>
    <button style=" width: 171px;height: 43px;letter-spacing: 5px;" class="btn btn-primary btn-block/" (click)="editRecord()">SAVE</button>
    <button style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: #ff0f0f; border: 0px;" class="btn btn-primary btn-block/"
      (click)="onNoClick(null)">CANCEL</button>
      <!-- <button *ngIf="showRenewButton" style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: green; border: 0px;"
        class="btn btn-primary btn-block/" (click)="renew()">RENEW</button> -->
  </div>
 
  <flash-messages style="float: center;"></flash-messages>
</div>


<!-- editRecord -->

<!-- previous style -->

<!-- <h3>Edit Device</h3>
<hr>
Device Name:
  <md-form-field class="example-full-width width" style="padding-left:3%;width: 69%;">
   <input mdInput type="text" [(ngModel)]="dname"  name="dname" required>
     <md-error class="pattern">Enter Device Name</md-error>
  </md-form-field>

<br>
Description:
  <md-form-field class="example-full-width width" style="padding-left:6%;width: 69%;" >
   <input mdInput type="text" [(ngModel)]="desc"  name="desc">
  </md-form-field>

<br>
Sim Number:
  <md-form-field class="example-full-width width"  style="padding-left:4%;width: 69%;">
   <input mdInput type="number" [(ngModel)]="sim"  name="sim">
  </md-form-field>
  <br>
  Driver Name:
  <md-form-field class="example-full-width width" style="padding-left:4%;width: 69%;">
   <input mdInput type="text" [(ngModel)]="drname"  name="drname">
  </md-form-field>
  <br>
  Driver Contact:
  <md-form-field class="example-full-width width" style="padding-left:4%;width: 69%;">
   <input mdInput type="number" [(ngModel)]="dcontact"  name="dcontact">
  </md-form-field>
  <br>
  Speed Limit:
  <md-form-field class="example-full-width width" style="padding-left: 17%;width: 70%;">
     <input mdInput type="number" [(ngModel)]="speed"  name="speed">
    </md-form-field>
<br>
Vechile Type:
<md-select  name="neww" placeholder="Vechiles Type" style="padding-left: 16%;width: 69%" [(ngModel)]="neww">
   <md-option *ngFor="let foodd of foodds" [value]="foodd" >
     {{ foodd.viewValue }}
   </md-option>
 </md-select> 
 <br>
 Groups:
 <md-select  placeholder="--Select Group--" style="padding-left: 24%;width: 77%;" [(ngModel)]="groupInfo">
  <md-option *ngFor="let group of groups" [value]="group">
    {{ group.GroupName }}
  </md-option>
</md-select> 

<br>
Fuel Tank Capacity :
<md-form-field class="example-full-width width" style="padding-left:6%;width: 58%;">
  <input mdInput class="no-spin" [(ngModel)]="fuel_tank_capicity" name=" tankCapicity" placeholder="Enter Volume" required/>
  <md-error class="required">Enter Volume</md-error>
  </md-form-field>
  <br>
Empty Tank Voltage :
  <md-form-field class="example-full-width width" style="padding-left:4%;width: 56%;">
    <input mdInput class="no-spin" [(ngModel)]="voltage_tank_empty" name=" when_tank_empty" placeholder="Voltage when tank empty" required/>
    <md-error class="required">Enter Voltage</md-error>
    </md-form-field>
    <br>
Tankfull Voltage :
    <md-form-field class="example-full-width width" style="padding-left:9%;width: 61%;">
      <input mdInput class="no-spin" [(ngModel)]="tankfull_capicity" name=" tankCapicity" placeholder="Voltage When Tankfull" required/>
      <md-error class="required">Enter Voltage</md-error>
      </md-form-field>
<br>

Device Model : 

<md-select style="padding-left: 16%;width: 69%" name="neww" placeholder="Device Model" [(ngModel)]="deviceModel._id" (ngModelChange)="getDevmodel($event)">
    <md-option  *ngFor="let model of newArr" [value]="model._id">{{model.device_type}}</md-option>
  </md-select>

<br>
Expiration date :
<div class="example-full-width width" style="padding-left: 39%;width: 92%;padding-bottom: 20px;">
<owl-date-time [(ngModel)]="expDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
</div>
<p *ngIf="errorField" style="text-align:center;color:red">Expiration date must be greater then current date</p>
<div style="padding-left:30%">
<button class="btn btn-danger btn-block/"style="cursor:pointer;" (click)="onNoClick(null)" >Cancel</button>
<button class="btn btn-primary btn-block/"style="cursor:pointer" (click)="editRecord()">Edit Record</button>
</div>
                        -->