2016-05-17 48 views
1

我更新了AngularJs版本从1.3到1.4。 它会导致一个错误,更新的Angular版本导致ngMessages错误

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

它完美地在角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

+0

什么版本究竟是你之前使用,现在使用的是? – thepio

+0

1.3.15到1.4.8 –

+0

它在1.3.15中工作正常 https://plnkr.co/edit/6UqmxJ0c8RsGzYpK6k6Y?p=preview –

回答

-1

最后我得到了解决,

添加功能越来越NG的消息属性值。

<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

+0

解释为什么它是否定答案。 –

2

如果你需要从一个动态的变量设置窗体名称,然后你可以使用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:ngForm的https://plnkr.co/edit/Q0ifmRXKkLfwKGNqv8p4?p=preview

正式文件:https://docs.angularjs.org/api/ng/directive/ngForm