将焦点更改为以 Angular 6 提交的表单答案

【问题标题】：Change focus to a form filed in angular 6将焦点更改为以 Angular 6 提交的表单
【发布时间】：2020-03-19 00:46:03
【问题描述】：

我正在angular 中创建一个crud application。我希望用户名是唯一的，如果用户名不是唯一的，我希望 throw an error 然后将 cursor 放在用户名字段中。我可以throw the error 并通知用户，但我无法将focus 更改为用户名字段。

提前感谢您的帮助。

下面是我的打字稿代码：

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

}

下面是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>

【问题讨论】：

添加相关的HTML代码
使用 # 向 html 字段添加“引用”。然后，在你的组件中，添加一个ViewChild 指向它，然后在它上面使用.nativeElement.focus() 来触发焦点。
@PrashantPimpale 添加了 html 代码。
@briosheje 你能举个例子吗？
Angular 5 set focus on input element的可能重复

标签： angular typescript angular6

【解决方案1】：

您可以调用HTMLInputElement 的focus() 方法。为此，请在您的输入上放置一个引用，例如 #username，然后使用 ViewChild('username') 在您的代码中读取它：

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

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

【讨论】：