ngx-valdemort 开源项目教程

姬为元Harmony

于 2024-09-10 08:36:55 发布

阅读量267

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00413/article/details/142079284

版权

ngx-valdemort 开源项目教程

ngx-valdemortSimpler, cleaner Angular validation error messages项目地址:https://gitcode.com/gh_mirrors/ng/ngx-valdemort

1. 项目介绍

ngx-valdemort 是一个用于 Angular 表单的简单、一致的验证错误消息显示库。它由 Ninja Squad 开发并维护，旨在减少开发者在处理表单验证时重复编写代码的工作量。通过 ngx-valdemort，开发者可以轻松地在表单控件上显示验证错误信息，并且可以全局配置错误信息的显示方式，从而保持应用中表单验证的一致性。

2. 项目快速启动

安装

首先，通过 npm 安装 ngx-valdemort：

npm install ngx-valdemort

配置

在你的 Angular 模块中导入 ValdemortModule：

import { ValdemortModule } from 'ngx-valdemort';

@NgModule({
  imports: [
    ValdemortModule
  ]
})
export class AppModule { }

使用

在你的表单模板中使用 <val-errors> 标签来显示错误信息：

<form [formGroup]="form">
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" formControlName="email">
    <val-errors controlName="email">
      <ng-template valError="required">The email is required</ng-template>
      <ng-template valError="email">The email must be a valid email address</ng-template>
    </val-errors>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

配置全局错误显示

你可以在根组件中配置全局错误显示方式：

import { Component } from '@angular/core';
import { ValdemortConfig } from 'ngx-valdemort';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(config: ValdemortConfig) {
    config.errorClasses = 'text-danger'; // 设置错误信息的 CSS 类
    config.display = 'one-by-one'; // 设置错误信息的显示方式
  }
}

3. 应用案例和最佳实践

案例1：简单的登录表单

在登录表单中使用 ngx-valdemort 来显示用户名和密码的验证错误信息：

<form [formGroup]="loginForm">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" formControlName="username">
    <val-errors controlName="username">
      <ng-template valError="required">Username is required</ng-template>
    </val-errors>
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" formControlName="password">
    <val-errors controlName="password">
      <ng-template valError="required">Password is required</ng-template>
    </val-errors>
  </div>
  <button class="btn btn-primary" type="submit">Login</button>
</form>