时间戳

首页 > 解决方案 > 带有角度的表单验证：如何显示不同无效案例的特定错误？

html - 带有角度的表单验证：如何显示不同无效案例的特定错误？

问题描述

我有一个验证所有输入的表单。例如，“用户名”输入我想首先确保它是必填字段，其次它的长度不小于 2 或大于 10（或适合我使用的另一种模式）。

我想在任一验证失败时显示错误。如果我想为每个案例显示一个特定的错误，我该怎么做？例如：如果输入为空显示'required'，如果值错误显示'invalid'。这是我的代码：

零件：

companyNamePattern = "^[a-z0-9_-]{8,15}$";
pwdPattern = "^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,12}$";
emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";

this.addCompForm = fb.group({
  'companyName':     [null,Validators.compose([Validators.required,Validators.minLength(5),Validators.maxLength(20)])],
  'companyPassword': [null,Validators.compose([Validators.required,Validators.minLength(5),Validators.maxLength(20)])],
  'companyEmail':    [null,Validators.compose([Validators.required,Validators.email])]
})

html:

<form [formGroup] ="addCompForm" (ngSubmit) = "addCompany(addCompForm.value)">
    <p>Enter the company name:</p>
    <input type="text" formControlName="companyName" >
    <div class="alert" *ngIf="!addCompForm.controls['companyName'].valid && addCompForm.controls['companyName'].touched" >{{nameAlert}}</div>

    <p>Enter the company password:</p>
    <input type="text" formControlName="companyPassword">
    <div class="alert"  *ngIf="!addCompForm.controls['companyPassword'].valid && addCompForm.controls['companyPassword'].touched " >{{passAlert}}</div>

    <p>Enter the company email:</p>
    <input type="text" formControlName="companyEmail">
    <div class="alert"  *ngIf="!addCompForm.controls['companyEmail'].valid && addCompForm.controls['companyEmail'].touched " >{{emailAlert}}</div>
    <br>
    <br>
    <div class="btn-container">
        <button type="submit" [disabled]="!addCompForm.valid">
            <i class="material-icons">done</i>
        </button>
    </div>
</form>

标签： htmlangularformsvalidationangular-reactive-forms

解决方案

*ngIf="addCompForm.get('companyName').hasError('required')

添加这个以使必填字段和

*ngIf="addCompForm.get('companyName').hasError('minLength')

添加这个以制作 minLength 并与 max length .hasErro('maxlength') 相同

推荐阅读