Angular Nebular UI库 form表单验证

Angular表单验证实战

最新推荐文章于 2025-06-05 09:08:14 发布

｀l l l s j 。

最新推荐文章于 2025-06-05 09:08:14 发布

阅读量714

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/qq_37167049/article/details/96442807

Angular 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Angular进行表单验证，并提供了一个实际的例子。详细展示了如何利用Angular内置的验证功能来实现表单输入的合法性检查，包括必填项验证、正则表达式验证等。

NebularUI库:这是一个俄罗斯的UI库,不知道为什么,并没有封装表单验证功能,可能是因为angular 有自己的一套表单验证方式吧~
https://akveo.github.io/nebular/docs/components/components-overview
感觉歪果仁的审美跟中国UI库还是有点差别的,功能也没有antd element 等组件库那么万能.
Angular官网对表单验证的解释
https://www.angular.cn/api/forms/Validators
结合之前的文章: Angular 从零开始 4- form表单验证
https://blog.youkuaiyun.com/qq_37167049/article/details/96323762

         <form novalidate #anyName="ngForm">
            <input type="text" nbInput fieldSize="small" placeholder="" id="name" name="name" pattern="[1-9]*"
                [(ngModel)]="hero.name" #name123="ngModel" required
                [status]="name123.invalid && (name123.dirty || name123.touched)&&name123.errors.pattern?'danger':'default'"
                (blur)="handleBlur(hero.name)">
            <div *ngIf="name123.invalid && (name123.dirty || name123.touched)">
                <div *ngIf="name123.errors.required">
                    你得写东西.
                </div>
                <div *ngIf="name123.errors.pattern">
                    你得输入数字
                </div>
            </div>
            <button nbButton status="info" [disabled]="anyName.invalid"
                (click)="handleClick(anyName.value)">Info</button>
        </form>

  hero = { name: '', abc: '' }
  handleBlur(val) {
    console.log(val, "123")          // 用户输入值

  }
  handleClick(val) {
    console.log(val, '222')     // 表单提交对象
  }

name123.invalid 等对应 #name123=“ngModel”
[disabled]=“anyName.invalid” 对应 <form novalidate #anyName=“ngForm”>
表单正则验证不通过 button 不可点击, 都ok button可点,且input框正则不通过显示红色border.
效果图如下:
在这里插入图片描述