Change focus to a form filed in angular 6

Question

I am creating a crud application in angular. I want the username to be unique and want to throw an error if the username is not unique and then place the cursor at the username field. I am able to throw the error and notify the user but I'm unable to change the focus to the username field.

Thanks in advance for the help.

Below is my typeScript code:

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

}

Below is the html code:

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

Add a "reference" to the html field using the `#`. Then, in your component, add a `ViewChild` pointing to it, then use `.nativeElement.focus()` on it to trigger the focus. — briosheje, Apr 12 '19 at 07:12
Possible duplicate of [Angular 5 set focus on input element](https://stackoverflow.com/questions/50006888/angular-5-set-focus-on-input-element) — briosheje, Apr 12 '19 at 07:13
@rock11 check the duplicate I related, you're likely trying to do the same thing ;) — briosheje, Apr 12 '19 at 07:13

jo_va · Accepted Answer · 2019-04-12T07:23:07.703

2

You can call the focus() method of the HTMLInputElement. To do that, place a reference on your input, for example #username, and then read it in your code with ViewChild('username'):

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

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

edited Apr 12 '19 at 07:23

answered Apr 12 '19 at 07:18

jo_va

13,504
3
23
47

Change focus to a form filed in angular 6

1 Answers1