Angular Dart表单中的细粒度错误消息 [英] Fine-grained error messages in Angular Dart forms

问题描述

我采用以下形式，其中包含一些简单的验证规则:

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>

我想显示 required ， ng-minLength 和 ng-maxLength 的特定错误消息，但是我没有成功能够深入到 signup_form ['username'].errors 来获取特定的错误.

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.

我可以在控制器中很好地访问 errors 映射，在标记中，我无法处理特定错误.我希望能够大致执行以下操作:

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>

即，angularJS中类似以下内容:

I.e., something like the following in angularJS:

<div ng-show="signup_form.username.$error.required">This field is required</div>

推荐答案

受到此过滤器的启发，我尝试了这种方法再次

Inspired by this filter I tried this approach again

角度0.9.9

@NgFilter(name: 'errors')
class ErrorFilter {
  call(val) {
    if(val != null) {
      return val.map.keys;
    }
    return null;
  }
}

和标记

{{signup_form['username'].errors | errors}}

编辑Angular 0.9.10

@NgFilter(name: 'errors')
class ErrorFilter {
  call(val) {
    if(val != null) {
      return val.keys;
    }
    return null;
  }
}

并在标记中

{{signup_form['username'].errorStates | errors}}

我从AngularDart Github回购中观察到的讨论中得知，正在寻求更好的解决方案.

I learned from the discussions I have observed in the AngularDart Github repo that better solutions are on their way.

相关的未解决问题
当此 https://github.com/angular/angular.dart/pull/771已着陆
希望有更好的解决方案.

related open issue
When this https://github.com/angular/angular.dart/pull/771 is landed
hopefully better solutions are possible.

这篇关于Angular Dart表单中的细粒度错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！