2016-05-17 52 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