angular4中响应式表单的验证如何做到统一错误处理?

0 0 angular4 javascript typescript
星夜小筑
星夜小筑

声望值:155 0人

2019-03-08 09:10:43 提问

关注 0关注

收藏 0收藏, 197浏览

各位大家,请问下angular4中响应式表单的验证如何做到统一错误处理?
我看了angular4的很多例子(包含官网),验证错误都是单独写的
如:

 
名称必填
名称最多100个字符
{{getErrorValueForFormControl('name','servererror')}}

这样界面感觉好多重复代码,能不能做统一处理,如检查的名称没有填写,自动生成



名称必填

这段代码

谢谢!

请先 登录 后评论

2个回答

  • TimoTolkki135声望 2018-09-25 09:25

    可以的。简略代码如下:html: <input type="text" formControlName="account"> <div *ngIf="formErrors.account" class="alert alert-danger">{{ formErrors.account }}</div> <input type="password" formControlName="password"> <div *ngIf="formErrors.password" class="alert alert-danger">{{ formErrors.password }}</div> ts: editForm: FormGroup; formErrors = { 'account': '', 'password': '' }; validationMessages = { 'account': { 'required': '请输入用户名', 'maxlength': '用户名不能超过20位' }, 'password': { 'required': '请输入密码', 'minlength': '密码至少6位', 'maxlength': '密码必须小于16位', 'pattern': '密码需要包含大小写和数字' } }; ngOnInit() { this.editForm = new FormGroup({ account: new FormControl('', [Validators.required, Validators.maxLength(20)]), password: new FormControl('', [ Validators.minLength(6), Validators.maxLength(16), Validators.required, Validators.pattern('^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z])[0-9a-zA-Z]{6,16}$') ]) }); this.editForm.valueChanges.subscribe(() => this.onValueChanged()); // 监听每次输入内容,获得错误信息 } onValueChanged() { for (const item in this.formErrors) { this.formErrors[item] = ''; for (const key in this.editForm.get(item).errors) { this.formErrors[item] += this.validationMessages[item][key] + ' '; } } }
    请先 登录 后评论
  • 独孤马特i58声望 2018-09-25 09:28

    题主用的是template driven的 form validation, 我再写一个reactive form validation 的例子,你可以选择一下看哪个更方便。使用reactive form, 你需要定义一个FormControl的对象,而不是直接在元素上使用formControlName指令了。 Template代码: <nz-input [formControl]="formCtrl" [nzId]="'name'"></nz-input> <ng-container *ngIf="validateFormControl(formCtrl).invalid"> <p class="alert alert-danger">{{validateFormControl(formCtrl).messages}}</p> </ng-container> TS代码 formGrp: FormGroup; formCtrl: FormControl = new FormControl(""); ngOnInit(): void { this.formGrp = new FormGroup({}); this.formGrp.addControl("formCtrlId", this.formCtrl); } validateFormControl(ctrl: FormControl): ValidationResult { let validation: ValidationResult = { invalid: false, messages: "" }; if (ctrl.errors && ctrl.errors.required) { validation.invalid = true; validation.messages = "Required"; } else if (ctrl.errors && formControl.errors.requiredlength) { validation.invalid = true; validation.messages = "Required length"; } else if (ctrl.errors && ctrl.errors.servererror ) { validation.invalid = true; validation.messages = "Server has error..."; } return validation; } interface ValidationResult { invalid: boolean; messages: string; } 如果你很多component里面都需要类似的自定义验证,你也可以把方法提出来作为公共的验证。
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问