Angular Dart 形式的细粒度错误消息 [英] Fine-grained error messages in Angular Dart forms
问题描述
我有以下带有一些简单验证规则的表单:
<div ng-show="signup_form['username'].dirty &&signup_form['username'].invalid"><!-- ... -->
<button type="submit">提交</button></表单>
我想显示 required
、ng-minLength
和 ng-maxLength
的特定错误消息,但我没有成功能够深入到 signup_form['username'].errors
以获取特定错误.
我可以在控制器中很好地访问 errors
映射,但在标记中我无法处理特定错误.我希望能够大致做这样的事情:
此字段为必填
解决方案 的工作示例受到这个过滤器的启发,我尝试了这种方法再次
角度 0.9.9
@NgFilter(name: 'errors')类错误过滤器{电话(瓦尔){if(val != null) {返回 val.map.keys;}返回空;}}
并在标记中
{{signup_form['username'].errors |错误}}
针对 Angular 0.9.10 进行编辑
@NgFilter(name: 'errors')类错误过滤器{电话(瓦尔){if(val != null) {返回 val.keys;}返回空;}}
并在标记中
{{signup_form['username'].errorStates |错误}}
我从 AngularDart Github 存储库中观察到的讨论中了解到,更好的解决方案正在开发中.
相关未决问题
当这个 https://github.com/angular/angular.dart/pull/771 落地
希望可以有更好的解决方案.
I have the following form with some simple validation rules:
<form name="signup_form" novalidate ng-submit="ctrl.signupForm()">
<div class="row">
<input placeholder="Username"
name="username"
ng-model="ctrl.username"
required
ng-minLength=3
ng-maxLength=8>
</div>
<div ng-show="signup_form['username'].dirty &&
signup_form['username'].invalid">
<!-- ... -->
</div>
<button type="submit">Submit</button>
</form>
I would like to display specific error messages for required
, ng-minLength
and ng-maxLength
, but I'm not having success being able to drill down into signup_form['username'].errors
to get the specific error.
I can access the errors
map just fine in the controller, it is in the markup that I cannot get a handle on the specific error. I would like to be able to do roughly something like this:
<div ng-show="signup_form['username'].errors['minlength'].invalid>
<!-- ... -->
</div>
I.e., something like the following in angularJS:
<div ng-show="signup_form.username.$error.required">This field is required</div>
解决方案 A working example for
Inspired by this filter I tried this approach again
Angular 0.9.9
@NgFilter(name: 'errors')
class ErrorFilter {
call(val) {
if(val != null) {
return val.map.keys;
}
return null;
}
}
and in the markup
{{signup_form['username'].errors | errors}}
EDIT for Angular 0.9.10
@NgFilter(name: 'errors')
class ErrorFilter {
call(val) {
if(val != null) {
return val.keys;
}
return null;
}
}
and in the markup
{{signup_form['username'].errorStates | errors}}
I learned from the discussions I have observed in the AngularDart Github repo that better solutions are on their way.
related open issue
When this https://github.com/angular/angular.dart/pull/771 is landed
hopefully better solutions are possible.
这篇关于Angular Dart 形式的细粒度错误消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文