简单表单校验
傻瓜式校验
直接复制Antd中demo
<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()"> <nz-form-item> <nz-form-control nzErrorTip="Please input your username!"> <nz-input-group nzPrefixIcon="user"> <input formControlName="userName" nz-input placeholder="Username" /> </nz-input-group> </nz-form-control> </nz-form-item> <nz-form-item> <nz-form-control nzErrorTip="Please input your Password!"> <nz-input-group nzPrefixIcon="lock"> <input formControlName="password" nz-input type="password" placeholder="Password" /> </nz-input-group> </nz-form-control> </nz-form-item> <nz-form-item> <nz-form-control> <button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button> </nz-form-control> </nz-form-item> </form>
validateForm!: FormGroup; submitForm(): void { for (const i in this.validateForm.controls) { this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].updateValueAndValidity(); } } constructor(private fb: FormBuilder) {} ngOnInit(): void { this.validateForm = this.fb.group({ userName: [null, [Validators.required]], password: [null, [Validators.required]], remember: [true] }); }
此类表单校验较为单一,或者要求比较低,通常即为required校验,错误信息提示也多为固定不变。
智能化校验
表单一旦开始有具体的细节校验或者复杂的业务参杂,校验提示必须准确、清晰。
userName
为例,除了为必填项,必然需要符合某种格式,亦或是指定邮箱格式等,那么校验必须同时反映出错误类型,本例假设用户名有长度要求进行演示。
<nz-form-control [nzErrorTip]="getErrTipByField('userName')"> <nz-input-group nzPrefixIcon="user"> <input formControlName="userName" nz-input placeholder="Username" /> </nz-input-group> </nz-form-control>
export class SimpleFormComponent implements OnInit { validateForm: FormGroup; errMessageMap = {}; constructor( private fb: FormBuilder ) { } ngOnInit() { this.errMessageMap = { userName: { required: 'please input your name!', minlength: 'please input at least least 5 character' }, password: { required: 'please input your password!' } }; this.validateForm = this.fb.group({ userName: [null, [Validators.required, Validators.minLength(5)]], password: [null, [Validators.required]], remember: [true] }, { updateOn: 'change' }); } submitForm(): void { if (this.validateForm.controls) { for (const i in this.validateForm.controls) { if (this.validateForm.controls[i]) { this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].updateValueAndValidity(); } } } } getErrTipByField(fieldName) { const errors = this.validateForm.get(fieldName).errors; let errMsg = ''; for (const key in errors) { if (errors.hasOwnProperty(key)) { errMsg += this.errMessageMap[fieldName][key]; } } return errMsg; } }
构建出一个数据对象,以满足不同字段下不同错误类型的错误提示,根据业务需求,决定是否显示全部错误信息或者按照业务优先级显示。
其它细节
表单校验时机可以设置,默认为change
,可选blur
、submit
表单验证正确的,想要提示勾号可以添加属性 nzHasFeedback
submit中那段代码是重新对表单进行验证了,一般验证中是不需要的,动态表单验证后续结合自定义表单服务进行演示。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Angular8 简单表单验证的实现示例”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
2024年05月04日
2024年05月04日
- StockfischRecords老虎鱼卡帕与和谐二重唱《远航-遥距的小岛》SACD-ISO
- 古璇《粤听粤好听》柏菲音乐[WAV]
- 李祥庭-幽居(古琴独奏)[正版CD原抓WAV+CUE]
- 谭艳《再度重相逢HQ》头版限量编号[低速原抓WAV+CUE]
- 群星《人声典范-金嗓子 DSD》[WAV+CUE][524M]
- 群星《旅途欢歌》2CD[WAV+CUE][1.3G]
- BlackWings Audio《女神异闻录 夜幕魅影-OST1》[320K/MP3][113.76MB]
- 海来阿木《西楼情歌》开盘母带[低速原抓WAV+CUE]
- 陈百强.2003-完全陈百强5CD【华纳】【WAV+CUE】
- 群星.2012-顾听生辉·乐坛大宗师经典半世纪3CD【环球】【WAV+CUE】
- BlackWings Audio《女神异闻录 夜幕魅影-OST1》[FLAC/分轨][332.91MB]
- 群星《音你而来 第2期》[320K/MP3][72.1MB]
- 群星《音你而来 第2期》[FLAC/分轨][197.58MB]
- 群星-中国新民乐(笛子)-戏竹4CD(DSD)[雨林唱片]WAV+CUE
- JacobCollier《DjesseVol.2》(2019)Hi-Res96kHz_24bit