Question

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

语法错误：令牌＆＃39; {＆＃39;表达式第2列的无效键 [{{frmname}}。emailAddress。$ error]从 [{frmname}}。EMAILADDRESS。$错误。

它在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>

Plunker：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错误

2 个答案: