<div class="form-row">
  <div class="col">
    <form class="form-group form-inline" ngNativeValidate>
      <mat-form-field class="example-full-width">
        <mat-label>Prefix</mat-label>
        <input type="text"
              placeholder="Pick one"
              aria-label="Number"
              matInput
              required
              [formControl]="simpleprefixControl"
              [matAutocomplete]="autosimpleprefix"
              >
        <mat-autocomplete autoActiveFirstOption #autosimpleprefix="matAutocomplete">
          <mat-option *ngFor="let option of simpleprefixfilteredOptions  | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
  <div class="col" style="width: 300px;">
    <form class="form-group form-inline">
      <mat-form-field class="example-full-width">
        <mat-label *ngIf="subjectsControl.value !=null">Subject : {{this.subjectsControl.value.split(':')[0]}}:{{this.subjectsControl.value.split(':')[1]}}</mat-label>
        <input type="text"
              placeholder="Pick one"
              aria-label="Number"
              matInput
              [formControl]="subjectsControl"
              required
              [matAutocomplete]="autosub"
              >
        <mat-autocomplete autoActiveFirstOption #autosub="matAutocomplete" showPanel="true" [displayWith]="displayFn">
          <mat-option *ngFor="let option of subjectsfilteredOptions  | async" [value]="option">
            {{option.split(" : ").pop()}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
    </div>
</div>
<div class="form-row">
    <div class="col">
      <form class="form-group form-inline">
        <mat-form-field class="example-full-width">
          <mat-label>Verb or State</mat-label>
          <mat-label *ngIf="verbsControl.value !=null">Subject :  {{this.verbsControl.value.split(':')[0]}}</mat-label>
          <input type="text"
                placeholder="Pick one"
                aria-label="Number"
                matInput
                required
                [formControl]="verbsControl"
                [matAutocomplete]="autoverb"
                >
          <mat-autocomplete autoActiveFirstOption #autoverb="matAutocomplete" showPanel="true" [displayWith]="displayFn">
            <mat-option *ngFor="let option of verbsfilteredOptions  | async" [value]="option">
              {{option.split(" : ").pop()}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>
      </div>
</div>
<div class="form-row">
      <div class="col">
        <form class="form-group form-inline">
          <mat-form-field class="example-full-width">
            <mat-label *ngIf="objectsControl.value !=null">Object : {{this.objectsControl.value.split(':')[0]}}:{{this.objectsControl.value.split(':')[1]}}</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  required
                  [formControl]="objectsControl"
                  [matAutocomplete]="autobjects"
                  >
            <mat-autocomplete autoActiveFirstOption #autobjects="matAutocomplete" showPanel="true" [displayWith]="displayFn">
              <mat-option *ngFor="let option of objectsfilteredOptions  | async" [value]="option">
                {{option.split(" : ").pop()}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
        </div>
        <div class="col">
          <form matTooltip="Under development" matTooltipPosition="right" class="form-group form-inline" >
            <fieldset disabled>
            <mat-form-field class="example-full-width">
              <mat-label>Logic connectivity</mat-label>
              <input type="text"
                    placeholder="Pick one"
                    aria-label="Number"
                    matInput
                    [formControl]="logic_conControl"
                    [matAutocomplete]="autolog_con"
                    >
              <mat-autocomplete autoActiveFirstOption #autolog_con="matAutocomplete">
                <mat-option *ngFor="let option of logic_confilteredOptions  | async" [value]="option">
                  {{option}}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
            </fieldset>
          </form>
          </div>
    </div>


<!--
<ng-container *ngFor= "let prefix of simpleprefix">
    <ul>
      <li>{{prefix[1]}}</li>
    </ul>
  -->