Under my Angular 6 app , i'm using Reactive Forms .

My purpose is when submitting , i want to set focus on first invalid input when error.

My form looks like this :

<form [formGroup]="addItemfForm " (ngSubmit)="onSubmitForm()">



  <div class="form-inline form-group">

    <label class="col-md-2 justify-content-start">

        Libellé du pef

        <span class="startRequired mr-1"> *</span>

    </label>

    <input type="text" maxlength="100" formControlName="libellePef" class="col-md-6 form-control" placeholder="saisie obligatoire" [ngClass]="{ 'is-invalid': submitted && formFiels.libellePef.errors }" />

    <div *ngIf="submitted && formFiels.libellePef.errors" class="col invalid-feedback">

      <div class="col text-left" *ngIf="formFiels.libellePef.errors.required">Libellé du pef est requis.</div>

    </div>

  </div>



  <div class="form-inline form-group">

    <label class="col-md-2 justify-content-start">

       Code Basicat

       <span class="startRequired mr-1"> *</span>

    </label>

    <input type="text" maxlength="100" formControlName="codeBasicat" class="col-md-3 form-control" placeholder="saisie obligatoire" [ngClass]="{ 'is-invalid': submitted && formFiels.codeBasicat.errors }" />

    <div *ngIf="submitted && formFiels.codeBasicat.errors" class="col invalid-feedback">

      <div class="text-left" *ngIf="formFiels.codeBasicat.errors.required">Code Basicat est requis.</div>

    </div>

  </div>



  <div class="form-inline form-group">

    <label class="col-md-2 justify-content-start">

        Nom de l'application

        <span class="startRequired mr-1"> *</span>

    </label>

    <input type="text" maxlength="100" formControlName="nomApplication" class="col-md-6 form-control" placeholder="saisie obligatoire" [ngClass]="{ 'is-invalid': submitted && formFiels.nomApplication.errors }" />

    <div *ngIf="submitted && formFiels.nomApplication.errors" class="col invalid-feedback">

      <div class="text-left" *ngIf="formFiels.nomApplication.errors.required">Nom de l'application est requis.

      </div>

    </div>

  </div>

</form>

Under my TS file , my form config looks like this :

this.addItemfForm = this.formBuilder.group({

  libellePef: ['', Validators.required],

  codeBasicat: ['', Validators.required ],

  nomApplication: ['', Validators.required ],

  urlCible: [''],

  modeTransfert: [''],

});

I've tried the autofocus directive but that didn't work

Suggestions?