title: Angular 6 Reactive Forms : How to set focus on first invalid input
body: <p>Under my <strong>Angular 6</strong> app , i'm using <strong>Reactive Forms</strong> .</p>
  <p>My purpose is when submitting , i want to set focus on first invalid input when error.</p>
  <p><em>My form looks like this :</em></p>
  <pre><code>&lt;form [formGroup]=&quot;addItemfForm &quot; (ngSubmit)=&quot;onSubmitForm()&quot;&gt;
  
    &lt;div class=&quot;form-inline form-group&quot;&gt;
      &lt;label class=&quot;col-md-2 justify-content-start&quot;&gt;
          Libellé du pef
          &lt;span class=&quot;startRequired mr-1&quot;&gt; *&lt;/span&gt;
      &lt;/label&gt;
      &lt;input type=&quot;text&quot; maxlength=&quot;100&quot; formControlName=&quot;libellePef&quot; class=&quot;col-md-6 form-control&quot; placeholder=&quot;saisie obligatoire&quot; [ngClass]=&quot;{ 'is-invalid': submitted &amp;&amp; formFiels.libellePef.errors }&quot; /&gt;
      &lt;div *ngIf=&quot;submitted &amp;&amp; formFiels.libellePef.errors&quot; class=&quot;col invalid-feedback&quot;&gt;
        &lt;div class=&quot;col text-left&quot; *ngIf=&quot;formFiels.libellePef.errors.required&quot;&gt;Libellé du pef est requis.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;form-inline form-group&quot;&gt;
      &lt;label class=&quot;col-md-2 justify-content-start&quot;&gt;
         Code Basicat
         &lt;span class=&quot;startRequired mr-1&quot;&gt; *&lt;/span&gt;
      &lt;/label&gt;
      &lt;input type=&quot;text&quot; maxlength=&quot;100&quot; formControlName=&quot;codeBasicat&quot; class=&quot;col-md-3 form-control&quot; placeholder=&quot;saisie obligatoire&quot; [ngClass]=&quot;{ 'is-invalid': submitted &amp;&amp; formFiels.codeBasicat.errors }&quot; /&gt;
      &lt;div *ngIf=&quot;submitted &amp;&amp; formFiels.codeBasicat.errors&quot; class=&quot;col invalid-feedback&quot;&gt;
        &lt;div class=&quot;text-left&quot; *ngIf=&quot;formFiels.codeBasicat.errors.required&quot;&gt;Code Basicat est requis.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;form-inline form-group&quot;&gt;
      &lt;label class=&quot;col-md-2 justify-content-start&quot;&gt;
          Nom de l'application
          &lt;span class=&quot;startRequired mr-1&quot;&gt; *&lt;/span&gt;
      &lt;/label&gt;
      &lt;input type=&quot;text&quot; maxlength=&quot;100&quot; formControlName=&quot;nomApplication&quot; class=&quot;col-md-6 form-control&quot; placeholder=&quot;saisie obligatoire&quot; [ngClass]=&quot;{ 'is-invalid': submitted &amp;&amp; formFiels.nomApplication.errors }&quot; /&gt;
      &lt;div *ngIf=&quot;submitted &amp;&amp; formFiels.nomApplication.errors&quot; class=&quot;col invalid-feedback&quot;&gt;
        &lt;div class=&quot;text-left&quot; *ngIf=&quot;formFiels.nomApplication.errors.required&quot;&gt;Nom de l'application est requis.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p><em>Under my TS file , my form config looks like this :</em></p>
  <pre><code>this.addItemfForm = this.formBuilder.group({
    libellePef: ['', Validators.required],
    codeBasicat: ['', Validators.required ],
    nomApplication: ['', Validators.required ],
    urlCible: [''],
    modeTransfert: [''],
  });
  </code></pre>
  <p>I've tried the <strong>autofocus</strong> directive but that didn't work</p>
  <p><strong>Suggestions?</strong></p>