Question

我正在尝试以角度（我的第一次）进行表单验证，并且我在以下时刻陷入困境：

我制作了带验证讯息的模板：form_messages.html

e.g。来自index.html的片段

<input type="password" name="password" ng-model="password" ng-minlength="6" required>
<div class="form-error" role="alert"
     ng-messages="form.password.$error"
     ng-show="form.password.$invalid && form.$submitted || form.password.$dirty">
    <ng-messages ng-messages-include="/path/to/form_messages.html"></ng-messages>
</div>

e.g。模板中的消息form_messages.html

<p class="form-error__message" ng-message when="required">Password is required.</p>
<p class="form-error__message" ng-message when="minlength">Password needs to be at least 6 characters.</p>

一切都很好，但我希望它对其他输入也很灵活。

完成此任务的最佳方式是什么？

form_messages.html中的以下摘要代码段中的内容将很棒：

<p class="form-error__message" ng-message when="minlength">
    {{ ng-model.name }} needs to be at least {{ ng-model.minlength }} characters.
</p>

Answer 1

实际上有一个针对此https://github.com/angular/angular.js/issues/9849

的功能请求

要获取验证器，您可以使用$ error对象，例如对于minlength，它将类似于form.$error.minlength[0].$name。但是，还没有办法获得这个验证器的确切值。请参阅此问题：https://github.com/angular/angular.js/issues/11671。

您需要实现ngModel指令（从问题中借用的代码）：

app.directive('ngModel', function attributeNgModelDirective() {
  return {
    require: 'ngModel',
    link: function(scope, el, attrs, ctrl) {
      ctrl.$attributes = attrs;
    }
  };
});

然后您可以将其用作form.$error.minlength[0].$attributes.minlength

<p class="form-error__message" ng-message when="minlength">
    {{ form.$error.minlength[0].$name }} needs to be at least {{ form.$error.minlength[0].$attributes.minlength }} characters.
</p>

请参阅完整示例：http://plnkr.co/edit/6u9v01AvBdAHhJwZOKtI?p=preview

角度获取模型属性，例如。使用MINLENGTH

1 个答案: