<div class="form-row">
  <div class="col">
    <form class="form-group form-inline" ngNativeValidate>
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="this.suffixControl.value !=null">Suffix : {{this.suffixControl.value.split(':')[0]}}:{{this.suffixControl.value.split(':')[1]}}</mat-label>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="suffixControl" required
          [matAutocomplete]="autosuffix">
        <mat-autocomplete autoActiveFirstOption #autosuffix="matAutocomplete" showPanel="true"
          [displayWith]="displayFn">
          <mat-option *ngFor="let option of suffixfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
  <div class="col">
    <form class="form-group form-inline">
      <mat-form-field class="example-full-width">
        <mat-label>Numerical Value</mat-label>
        <input type="text" matInput [(ngModel)]="currentsuffix.numerical" name="numerical">
      </mat-form-field>
    </form>
  </div>
  <div class="col">
    <form class="form-group form-inline">
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="this.mumerical_unitsControl.value !=null">Numerical Value
          : {{this.mumerical_unitsControl.value.split(':')[0]}}:{{this.mumerical_unitsControl.value.split(':')[1]}}</mat-label>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="mumerical_unitsControl"
          [matAutocomplete]="autonumsuffix">
        <mat-autocomplete autoActiveFirstOption #autonumsuffix="matAutocomplete" showPanel="true"
          [displayWith]="displayFn">
          <mat-option *ngFor="let option of mumerical_unitsfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
  <div class="col" *ngIf="this.mumerical_unitsControl.value !=null">
    <form class="form-group form-inline"
      [ngStyle]=" showflow(this.suffixControl.value) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="flowControl.value !=null">Flow or Function : {{this.flowControl.value.split(':')[0]}}:{{this.flowControl.value.split(':')[1]}}</mat-label>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="flowControl" required
          [matAutocomplete]="autoflow">
        <mat-autocomplete autoActiveFirstOption #autoflow="matAutocomplete" showPanel="true" [displayWith]="displayFn">
          <mat-option *ngFor="let option of flowfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
</div>