Question

我正在按照建议的角度angular form validation error example的方法显示反应形式错误消息。

在页面上显示错误的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条件？，因为我一次又一次地编写相同的代码，而使用不同的控件名称和验证者名称来显示错误消息。

Answer 1

处理所有错误的更好方法，创建一个单独的组件error-component

error.component.ts

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

@Component({
    selector: 'error-component',
    templateUrl: 'error.component.html',
    styleUrls: ['error.component.scss']
})

export class ErrorComponent {

    errorMsgList: any = [];

    @Input() controlName: AbstractControl | AbstractControlDirective

    errorMessage = {
        'required'  : (params)  => `This field is required`,
        'maxlength' : (params)  => `Maximum ${params.requiredLength} characters are allowed`,
        'minlength' : (params)  => `Minimum ${params.requiredLength} characters are required`,
        'pattern'   : (params)  => `Invalid format`,
        'min'       : (params)  => `Minimum amount should be ₹ ${params.min}`,
        'whitespace': (params)   => `White spaces are not allowed`
    };


    listErrors() {
        if (!this.controlName) return [];
        if (this.controlName.errors) {
            this.errorMsgList = [];
            Object.keys(this.controlName.errors).map( error => {
                this.controlName.touched || this.controlName.dirty ?
                this.errorMsgList.push(this.errorMessage[error](this.controlName.errors[error])) : '';
            });
            return this.errorMsgList;
        }
        else {
            return [];
        }
    }
}

error.component.html

<small class="error-block" *ngFor="let errorMessage of listErrors(); let last=last;">
    {{last ? errorMessage: ''}}
</small>

用法

<input 
   [type] ="inputObj.mobileNumber.type" 
   id="id1" name="custMobNumber" 
   [(ngModel)]="inputObj.mobileNumber.value" 
   [required]="inputObj.mobileNumber.required" 
   [minlength]="inputObj.mobileNumber.minLength" 
   [maxlength]="inputObj.mobileNumber.maxLength" 
   [pattern]="inputObj.mobileNumber.pattern" 
   class="textbox font-15 full-width">
   <error-component [controlName]="collectionForm.controls['custMobNumber']">
    </error-component>

Answer 2

如果是小格式，我通常只使用大量*ngIf；但是，如果您的应用程序几乎完全是需要验证的形式，则上述自定义验证程序指令可能会很有用。

查看源代码，了解如何设置内置验证器。 https://github.com/angular/angular/blob/2.0.0-rc.3/modules/%40angular/common/src/forms-deprecated/directives/validators.ts#L104-L124

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

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

Answer 3

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

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组件，但这对验证显示没有帮助。

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

Answer 4

也许试试这个很棒的包：https://www.npmjs.com/package/ngx-form-validations

这个包有一个通用的错误信息字典，取决于错误类型。它的安装一点也不复杂。

它可以管理您的整个表单，而不仅仅是一个控件。如果您需要一些额外的扩展，请随时在 GitHub 上与我联系。

此外：有一个演示页面，您可以在其中轻松检查其操作，并且还有一个演示项目。联系方式可以在包裹中找到。

Answer 5

我建议使用一个指令和组件来显示强大的错误消息。组件，用于表单控件的每个错误消息，以及用于在表单控件的本机元素下添加组件的指令。完整的代码可以在here

中找到

显示角反应性形式的错误消息的最佳方法，一种形式控制多个验证错误？

5 个答案:

error.component.ts

error.component.html

用法