在我的 Angular 6 应用程序下,我正在使用 react 性表单
我的目的是在提交时,我想将重点放在出现错误时的第一个无效输入上。
我的表格如下所示:

<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: [''],
});
我已经尝试过自动对焦指令,但是没有用
建议?

最佳答案

在您的提交中使用以下代码。

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。

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

10-07 14:55
查看更多