typescript - Byt fokus till ett formulärfält i angular 6

Jag skapar en crud-applikation i angular. Jag vill att användarnamnet ska vara unikt och vill kasta ett fel om användarnamnet inte är unikt och sedan placera markören vid användarnamnsfältet. Jag kan kasta felet och informera användaren men jag kan inte ändra fokus till användarnamnsfältet.

Tack på förhand för hjälpen.

Nedan är min TypeScript-kod:

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();
  }

}

Nedan är HTML-koden:

<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>

Svar #1

Du kan anropa focus()-metoden på HTMLInputElement. För att göra det, placera en referens på ditt inmatningsfält, till exempel #username, och läs sedan upp det i din kod med ViewChild('username'):

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

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