更新 Angular 版本导致 ngMessages 出错

Question

我将 AngularJs 版本从 1.3 更新到 1.4。它会导致错误，

Syntax Error: Token '{' invalid key at column 2 of the expression
[{{frmname}}.emailAddress.$error] starting at [{frmname}}.emailAddress.$error].

它在 Angular 1.3

中完美运行

<form name="{{frmname}}">
  <h1>My form name = {{frmname}}</h1>
  <div class="field">
  <label for="emailAddress">Enter your email address:</label>
  <input type="email" name="emailAddress" ng-model="email" required />
    <div ng-messages="{{frmname}}.emailAddress.$error">
      <div ng-message="required">
        You forgot to enter your email address...
      </div>
      <div ng-message="email">
        You did not enter your email address correctly...
      </div>
    </div>
  </div>
  <input type="submit" />
</form>

FIDDLE

Answer 1

如果您需要从动态变量设置您的表单名称，那么您可以使用 ng-form 来验证您在实际表单中的输入。

基本html:

<form name="{{formName}}" novalidate>

  <ng-form name="emailError">
    <div ng-messages="emailError.emailAddress.$error" style="color:maroon" role="alert">
      <label for="emailAddress">Enter your email address:</label>
      <input type="email" name="emailAddress" ng-model="email" minlength="5" required />
      <div ng-messages="emailError.emailAddress.$error" style="color:maroon" role="alert">
      <div ng-message="required">You did not enter a field</div>
    </div>
  </ng-form>

  <input type="submit" />

</form>

笨蛋：https://plnkr.co/edit/Q0ifmRXKkLfwKGNqv8p4?p=preview

ngForm官方文档：https://docs.angularjs.org/api/ng/directive/ngForm

Answer 2

终于找到解决办法了，

添加获取 ng-messages 属性值的函数。

<div ng-messages="getMessages('emailAddress')">
  <div ng-message="required">
    You forgot to enter your email address...
  </div>
  <div ng-message="email">
    You did not enter your email address correctly...
  </div>
</div>

在控制器或指令中声明函数。

$scope.getMessages = function (el) {
  return $scope.$eval($scope.frmname)[el].$error;
}

FIDDLE

更新 Angular 版本导致 ngMessages 出错

Updated Angular version causes error on ngMessages

javascript

angularjs

ng-messages