时间戳

首页 > 解决方案 > 聚焦第一个无效输入

angular - 聚焦第一个无效输入

问题描述

我需要关注单击按钮后表单的第一个无效输入。我需要在<form>. 怎么触发？。堆栈闪电战

HTML

<form focusInvalidInput [formGroup]="form">
  <label for="first">First Name</label>
  <input formControlName="first" />

  <label for="last">Last Name</label>
  <input formControlName="last" />

  <br />
 
</form>

<button (click)="submit()">submit</button>

零件

constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      first: ['', Validators.required],
      last: ['', Validators.required],
    });
  }
  submit() {
    if (this.form.valid) {
      console.log(this.form);
    }
  }

标签： angulartypescript

解决方案

使用exportAs您可以将公共方法公开给您的模板

import { Directive, HostListener, ElementRef } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { FormGroup } from '@angular/forms';

@Directive({
  selector: '[focusInvalidInput]',
  exportAs: 'focusInvalidInput'
})
export class FormAutoFocus {

  constructor(private el: ElementRef) { }

  public focus():void{
    const invalidControl = this.el.nativeElement.querySelector('.ng-invalid');
    console.log("test", invalidControl);
    if (invalidControl) {
      invalidControl.focus();
      console.log("test");
    }
  }
}

现在我们可以在模板中的任何位置访问 FormAutoFocus 实例

<form focusInvalidInput #focusInput="focusInvalidInput" [formGroup]="form">
  <label for="first">First Name</label>
  <input formControlName="first" />

  <label for="last">Last Name</label>
  <input formControlName="last" />
  <br />
</form>

<button (click)="submit();focusInput.focus()">submit</button>

分叉的工作示例

推荐阅读