typescript - Cambiar el enfoque a un campo de formulario en angular 6

Estoy creando una aplicación CRUD en Angular. Quiero que el nombre de usuario sea único y quiero lanzar un error si el nombre de usuario no es único y luego colocar el cursor en el campo del nombre de usuario. Soy capaz de lanzar el error y notificar al usuario, pero no puedo cambiar el foco al campo del nombre de usuario.

Gracias de antemano por la ayuda.

A continuación está mi código TypeScript:

export class AdduserComponent implements OnInit {

  constructor(
    private formBuilder: FormBuilder,
    private userService: UsersService,
    private router: Router,
    private snackBar: MatSnackBar
  ) { }

  addForm: FormGroup;
  passwordsMatcher = new RepeatPasswordEStateMatcher;

  ngOnInit() {
    this.addForm = this.formBuilder.group({
      id: [],
      userName: ['', Validators.required],
      password: new FormControl('', [Validators.required]),
      passwordAgain: new FormControl('', [Validators.required]),
      userRole: ['', Validators.required],

    }, { validator: RepeatPasswordValidator });
  }

  onSubmit() {
    if (this.addForm.valid) {
      this.userService.createUser(this.addForm.value)
        .subscribe(data => {
          console.log(data);
          this.snackBar.open("New User Created", "Success", {
            duration: 1000,
          });
          setTimeout(
            function () {
              window.location.reload();
            }, 2000);
          //this.router.navigate(['adduser']);
        }, error => {
            console.log(error);
            this.snackBar.open("Username Already Exists", "Please Provide Different UserName", {
              duration: 2000,
            });
            this.addForm.controls.userName.reset();
          });
    }
    //window.location.reload();
  }

  changeClient(value) { }

  resetForm() {
    console.log("Reset called");
    this.addForm.reset();
  }

}

Debajo está el código HTML:

<div  style="height: 100vh" fxLayout="column" fxLayoutAlign="center center" >
  <mat-toolbar class="toolbar">
    <span class="span">Create New NI User</span>
  </mat-toolbar>
    <mat-card class="card">
        <mat-card-content>

    <form [formGroup]="addForm" class="login-form" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <mat-form-field class="example-full-width">
          <mat-icon matSuffix  > person_identity</mat-icon>
      <input matInput type="text" formControlName="userName" placeholder="UserName" name="userName" class="form-control" id="userName">
      <mat-error *ngIf="addForm.controls.userName.hasError('required')" >UserName can't be empty</mat-error>
        </mat-form-field>
    </div>
    <p></p>
    <div class="form-group"> 
        <mat-form-field class="example-full-width">

      <input matInput [type]="!hide ? 'password' : 'text'" formControlName="password" placeholder="Password" name="password" class="form-control" id="password">
      <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>

      <mat-error *ngIf="addForm.controls.password.hasError('required')" >Passwords can't be empty</mat-error>
    </mat-form-field>
    </div>
    <p></p>

    <div class="form-field">
        <mat-form-field>
        <input matInput formControlName="passwordAgain" placeholder="Confirm password" [type]="!hides ? 'password' : 'text'" [errorStateMatcher]="passwordsMatcher">
        <mat-icon matSuffix (click)="hides = !hides">{{hides ? 'visibility' : 'visibility_off'}}</mat-icon>

        <mat-error *ngIf="addForm.hasError('passwordsNotEqual')" >Passwords are different. They should be equal!</mat-error>
        </mat-form-field>
    </div>
    <p></p>

    <mat-form-field>
        <mat-icon matSuffix>accessibility</mat-icon>

        <mat-select placeholder="User Role"  formControlName="userRole" id="userRole" (selectionChange)="changeClient($event.value)" >
          <mat-option value="Admin">Admin</mat-option>


        </mat-select>
      </mat-form-field>

      <div class="container" style="margin: 12px" fxLayout="row" fxLayoutAlign="center center">


    <button mat-raised-button class="bt" color="primary">Create</button>
    <button mat-raised-button type="reset"  (click)= "resetForm()" color="warn">Cancel</button>


      </div>
  </form>



  </mat-card-content>
    </mat-card>
</div>

Respuesta #1

Puedes llamar al método focus() del HTMLInputElement. Para hacer eso, coloca una referencia en tu entrada, por ejemplo #username, y luego léela en tu código con ViewChild('username'):

<input #username matInput type="text" formControlName="userName" ...>

import { ElementRef, ViewChild } from '@angular/core';
...
@ViewChild('username') usernameRef: ElementRef;
...
usernameRef.nativeElement.focus();