首页 文章

显示角度反应形式的错误消息的最佳方法，一个 formcontrol 多个验证错误？

提问于
浏览 次
0

我按照棱镜角形验证错误示例的建议方法显示反应式表单错误消息。

在页面上显示错误的 HTML 代码：

<div [formGroup]="myForm">
  <div>
<input type="text" formControlName="firstName"/>
<div *ngIf="myForm.controls.firstName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.firstName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.firstName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  <div>
<input type="text" formControlName="lastName"/>
<div *ngIf="myForm.controls.lastName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.lastName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.lastName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  </div>

仅供以下组件代码参考：

this.myForm = this.formBuilder.group({
      firstName:['',[Validators.required,Validators.maxLength(50)]],
      lastName:['',[Validators.required,Validators.maxLength(50)]]
    })

如果您看到上面的代码，我在 firstName 和 lastName 字段上应用了两个验证。

为了显示错误消息，我写了多个* ngIf 条件来显示错误消息。

有没有最好的方法来显示特定控件的验证消息而不写多个* ngIf 条件？，因为我一次又一次地使用不同的控件名称和验证器名称来显示错误消息的相同代码。

angular angular-ng-if angular-validation

4 回答

  • 3

    我建议有一个名为print-error的组件，它可以处理任何类型的 OOTB 或自定义错误。

    您可以处理所需的错误。

    import {Component, Input} from '@angular/core';

@Component({
    selector: 'print-error',
    templateUrl: './print-error.component.html',
    providers: []
})
export class PrintError {

    @Input("control")
    control: any;

}

    <div class="text-danger" *ngIf="control && control.errors && (control.dirty || control.touched)">
     <div *ngIf="control.errors.required"><small>This field is required</small></div>
     <div *ngIf="control.errors.unique"><small>{{control.errors.unique}}</small></div>
     <div *ngIf="control.errors.lessThen"><small>{{control.errors.lessThen}}</small></div>
     <div *ngIf="control.errors.greaterThan"><small>{{control.errors.greaterThan}}</small></div>
     <div *ngIf="control.errors.email"><small>{{control.errors.email}}</small></div>
     <div *ngIf="control.errors.mobile"><small>{{control.errors.mobile}}</small></div>
     <div *ngIf="control.errors.confirmPassword"><small>{{control.errors.confirmPassword}}</small></div>
</div>

    用法

    <label for="folder-name">Email</label>
 <input name="email" required   emailValidator #email="ngModel" [(ngModel)]="user.email">
 <print-error [control]="email"></print-error>
    回复于
  • 2

    我一直致力于一个主要形式驱动的企业应用程序，并遇到了同样的挑战。我可以确定的最佳解决方案是将所有输入控件包装在组件中。然后处理组件内的验证显示。这允许一致的验证显示，而无需在每种形式中多次重复代码。

    field-input-text.component.html

    <input [formControl]="formControlItem" [maxlength]="maxlength" [placeholder]="placeholder" #input>
    <span *ngIf="formControlItem.invalid && (formControlItem.dirty || formControlItem.touched)" class="text-danger">
        <span *ngIf="formControlItem.errors.required">This field is required</span>
        <span *ngIf="formControlItem.errors.minlength">This field is too short</span>
        <span *ngIf="formControlItem.errors.maxlength">This field is too long</span>
        <span *ngIf="formControlItem.errors.pattern">Invalid value for this field</span>
    </span>

    field-input-text-component.ts

    import { Component, OnInit } from '@angular/core';
    import { FormControl } from '@angular/forms';

    @Component({
      selector: 'app-field-input-text',
      templateUrl: './field-input-text.component.html'
    })
    export class FieldInputTextComponent implements OnInit, AfterViewInit {
      @Input() formControlItem: FormControl;
      @Input() maxlength: number;
      @Input() placeholder: string = '';

      constructor() { }

      ngOnInit() {
      }
    }

    用法

    <app-field-input-text [formControlItem]="form.controls.username" maxlength="10"></app-field-input-text>

    在使用中，您可以看到它节省的空间，而无需额外的验证线。您还可以在一个地方重新格式化所有验证，而不是触及每个区域。

    主要缺点是无法使用 formControl 或 formControlName 属性。我尝试创建一个自定义的 ControlValueAccessor 组件，但这对验证显示没有帮助。

    我发现你的问题正在寻找是否有其他人找到了更好的方法。我知道这个答案有点晚，但希望它有所帮助。

    回复于
  • 0

    如果它是一个小形式我通常只使用很多*ngIf;但是，如果您的应用程序几乎完全是需要验证的表单，则上面提到的自定义验证程序指令可能很有用。

    查看源代码，了解如何设置 built-in 验证器。 https://github.com/angular/angular/blob/2.0.0-rc.3/modules/ _％2 _#L104-L124

    这是我挖出的一个例子，但我认为对于大多数用例来说这有点过分。只需在模板 HTML 中写一个* ngIf 行，而不是全新的@Attribute...

    https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2

    回复于
  • -1

    我建议有一个指令和组件来显示有力的错误信息。表单控件和指令的每个错误消息的组件，用于在表单控件的本机元素下添加组件。完整的代码可以找到这里

    回复于

相关问题