<div class="adf-group-widget {{field.className}}"
     [class.is-dirty]="value"
     [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" id="functional-group-div">
    <mat-form-field>
        <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
        <input matInput
               class="adf-input"
               type="text"
               [id]="field.id"
               [(ngModel)]="value"
               (keyup)="onKeyUp($event)"
               [disabled]="field.readOnly"
               placeholder="{{field.placeholder}}"
               [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
            <mat-option *ngFor="let item of groups"
                       [id]="field.id +'-'+item.id"
                       (click)="onItemClick(item, $event)"  [value]="item">
                <span>{{item.name}}</span>
            </mat-option>
        </mat-autocomplete>

    </mat-form-field>
    <error-widget [error]="field.validationSummary"></error-widget>
    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
