Angular 6反应形式:如何将重点放在第一个无效输入上 [英] Angular 6 Reactive Forms : How to set focus on first invalid input
本文介绍了Angular 6反应形式:如何将重点放在第一个无效输入上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我的 Angular 6 应用中,我正在使用反应形式.
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.
我的表单如下:
<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>
在我的TS文件下,我的表单配置如下:
this.addItemfForm = this.formBuilder.group({
libellePef: ['', Validators.required],
codeBasicat: ['', Validators.required ],
nomApplication: ['', Validators.required ],
urlCible: [''],
modeTransfert: [''],
});
我已经尝试过 autofocus 指令,但这没用
I've tried the autofocus directive but that didn't work
建议?
推荐答案
在提交中使用以下代码.
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将是您的FormGroup.
this.addressForm will be your FormGroup.
我们这里甚至不需要指令.
We don't even need directive here.
这篇关于Angular 6反应形式:如何将重点放在第一个无效输入上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文