Angular自定义模板驱动表单验证指令

最新推荐文章于 2022-12-19 16:19:28 发布

oneloser

最新推荐文章于 2022-12-19 16:19:28 发布

阅读量468

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/oneloser/article/details/106109554

版权

angular 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍如何在Angular中创建自定义模板驱动表单验证指令，分为两个步骤：1. 创建指令，2. 编写相关代码实现验证逻辑。通过此教程，读者将掌握Angular表单验证的自定义扩展能力。

摘要由CSDN通过智能技术生成

1、创建指令

// 以下命令会创建AccountValidatorDirective指令并自动添加到AppModule
ng g directive validator/accountValidator

2、相关代码

// app.component.html

<form name="loginForm" #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
    <div>
        <p>
            <label>账户：</label>
            <input name="account" type="text" placeholder="请输入您的账户" autocomplete="off" #account="ngModel"
                [(ngModel)]="model.account" appAccountValidator="{{model.account}}" />
        </p>
        <p *ngIf="account.errors" [hidden]="account.valid || account.pristine">
            {{account.errors.account.value}}
        </p>
        <!-- 也可将验证提示信息写在模板中方便做国际化，此时指令中可返回一个空对象 -->
        <!-- <p *ngIf="account.errors" [hidden]="account.valid || account.pristine">
            账户必须包含字母和数字且长度在4-16之间！
        </p> -->
    </div>
    <div>
        <button type="submit" [disabled]="!loginForm.form.valid">提交按钮</button>
        <button type="reset">重置按钮</button>
    </div>
</form>

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.styl']
})

export class AppComponent {

  public model = {
    account: ''
  };

  onSubmit(data: any) {
    console.log(data);
  }
  
}

// account-validator.directive.ts

import { Directive, Input } from '@angular/core';
import { Validator, ValidationErrors, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[appAccountValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: AccountValidatorDirective,
    multi: true
  }]
})

export class AccountValidatorDirective implements Validator {

  @Input('appAccountValidator')
  private account: string;

  constructor() { }

  validate(): { [Key: string]: ValidationErrors } {
    // 正在表达式可能不太准确~_~
    const regExp = /^[a-zA-Z]\w{3,15}$/;
    const oddses = regExp.test(this.account);
    const object = { account: { value: '账户必须包含字母和数字且长度在4-16之间！' } };
    return oddses ? null : object;
  }

  // validate(): { [Key: string]: ValidationErrors } {
  //   // 正在表达式可能不太准确~_~
  //   const regExp = /^[a-zA-Z]\w{3,15}$/;
  //   const oddses = regExp.test(this.account);
  //   const object = { account: {} };
  //   return oddses ? null : object;
  // }

}