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.csdn.net/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. 效果图如下:
