Angular 6 Reactive Forms:如何将焦点设置在第一个无效输入上 [英] Angular 6 Reactive Forms : How to set focus on first invalid input

查看:24
本文介绍了Angular 6 Reactive Forms:如何将焦点设置在第一个无效输入上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的 Angular 6 应用程序下,我使用的是 Reactive Forms.

我的目的是在提交时,我想在出错时将焦点设置在第一个无效输入上.

我的表单如下所示:

<div class="form-inline form-group"><label class="col-md-2 justify-content-start">Libellé du pef<span class="startRequired mr-1">*</span><输入类型=文本"最大长度=100"formControlName=libellePef"class=col-md-6 表单控件"占位符=saisie obligatoire"[ngClass]="{'is-invalid': 已提交 &&formFiels.libellePef.errors }";/><div *ngIf="submitted &&formFiels.libellePef.errors"class="col invalid-feedback"><div class="col text-left";*ngIf=formFiels.libellePef.errors.required">Libellé du pef est requis.</div>

<div class="form-inline form-group"><label class="col-md-2 justify-content-start">基本代码<span class="startRequired mr-1">*</span><输入类型=文本"最大长度=100"formControlName="codeBasicat";class=col-md-3 表单控件"占位符=saisie obligatoire"[ngClass]="{'is-invalid': 已提交 &&formFiels.codeBasicat.errors }";/><div *ngIf="submitted &&formFiels.codeBasicat.errors"class="col invalid-feedback"><div class="text-left";*ngIf=formFiels.codeBasicat.errors.required">基本代码要求.

<div class="form-inline form-group"><label class="col-md-2 justify-content-start">申请名称<span class="startRequired mr-1">*</span><输入类型=文本"最大长度=100"formControlName=nomApplication"class=col-md-6 表单控件"占位符=saisie obligatoire"[ngClass]="{'is-invalid': 已提交 &&formFiels.nomApplication.errors }";/><div *ngIf="submitted &&formFiels.nomApplication.errors"class="col invalid-feedback"><div class="text-left";*ngIf=formFiels.nomApplication.errors.required">Nom de l'application est requis.

</表单>

在我的 TS 文件下,我的表单配置如下所示:

this.addItemfForm = this.formBuilder.group({libellePef: ['', Validators.required],codeBasicat: ['', Validators.required ],nomApplication: ['', Validators.required ],网址:[''],模式传输:[''],});

我尝试了 autofocus 指令,但没有用

建议?

解决方案

在提交中使用以下代码.

for (Object.keys(this.addressForm.controls) 的常量键) {如果(this.addressForm.controls[key].invalid){const invalidControl = this.el.nativeElement.querySelector('[formcontrolname="' + key + '"]');invalidControl.focus();休息;}}

this.addressForm 将是您的 FormGroup.

我们在这里甚至不需要指令.

Under my Angular 6 app , i'm using Reactive Forms .

My purpose is when submitting , i want to set focus on first invalid input when error.

My form looks like this :

<form [formGroup]="addItemfForm " (ngSubmit)="onSubmitForm()">

  <div class="form-inline form-group">
    <label class="col-md-2 justify-content-start">
        Libellé du pef
        <span class="startRequired mr-1"> *</span>
    </label>
    <input type="text" maxlength="100" formControlName="libellePef" class="col-md-6 form-control" placeholder="saisie obligatoire" [ngClass]="{ 'is-invalid': submitted && formFiels.libellePef.errors }" />
    <div *ngIf="submitted && formFiels.libellePef.errors" class="col invalid-feedback">
      <div class="col text-left" *ngIf="formFiels.libellePef.errors.required">Libellé du pef est requis.</div>
    </div>
  </div>

  <div class="form-inline form-group">
    <label class="col-md-2 justify-content-start">
       Code Basicat
       <span class="startRequired mr-1"> *</span>
    </label>
    <input type="text" maxlength="100" formControlName="codeBasicat" class="col-md-3 form-control" placeholder="saisie obligatoire" [ngClass]="{ 'is-invalid': submitted && formFiels.codeBasicat.errors }" />
    <div *ngIf="submitted && formFiels.codeBasicat.errors" class="col invalid-feedback">
      <div class="text-left" *ngIf="formFiels.codeBasicat.errors.required">Code Basicat est requis.</div>
    </div>
  </div>

  <div class="form-inline form-group">
    <label class="col-md-2 justify-content-start">
        Nom de l'application
        <span class="startRequired mr-1"> *</span>
    </label>
    <input type="text" maxlength="100" formControlName="nomApplication" class="col-md-6 form-control" placeholder="saisie obligatoire" [ngClass]="{ 'is-invalid': submitted && formFiels.nomApplication.errors }" />
    <div *ngIf="submitted && formFiels.nomApplication.errors" class="col invalid-feedback">
      <div class="text-left" *ngIf="formFiels.nomApplication.errors.required">Nom de l'application est requis.
      </div>
    </div>
  </div>
</form>

Under my TS file , my form config looks like this :

this.addItemfForm = this.formBuilder.group({
  libellePef: ['', Validators.required],
  codeBasicat: ['', Validators.required ],
  nomApplication: ['', Validators.required ],
  urlCible: [''],
  modeTransfert: [''],
});

I've tried the autofocus directive but that didn't work

Suggestions?

解决方案

Use below code in your submit.

for (const key of Object.keys(this.addressForm.controls)) {
      if (this.addressForm.controls[key].invalid) {
        const invalidControl = this.el.nativeElement.querySelector('[formcontrolname="' + key + '"]');
        invalidControl.focus();
        break;
     }
}

this.addressForm will be your FormGroup.

We don't even need directive here.

这篇关于Angular 6 Reactive Forms:如何将焦点设置在第一个无效输入上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆