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

问题描述

我有以下带有一些简单验证规则的表单:

<div class="row"><输入占位符=用户名"名称=用户名"ng-model="ctrl.username"必需的ng-minLength=3ng-maxLength=8>

<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屋！