2017-05-31 174 views
0

我使用的是NG-重複渲染形式的一個字段:綁定NG-消息NG-重複

<fieldset data-ng-repeat="education in edit_profile.education"> 
    <div class="row">        
    <md-input-container class="col-xs-12 col-sm-12 col-lg-6 input-profile"> 
     <label>University</label> 
     <input required="" name="editProfile_StudentUni{{$index}}" ng-model="education.uni"> 
     <div ng-messages="myProfile['editProfile_StudentUni' + $index].$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 
    <md-input-container class="col-xs-12 col-sm-12 col-lg-6 input-profile"> 
     <label>Course</label> 
     <input required="" name="editProfile_StudentCourse{{$index}}" ng-model="education.course"> 
     <div ng-messages="myProfile['editProfile_StudentCourse' + $index].$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 
    </div> 
    <div class="row">        
    <md-input-container class="col-xs-12 col-sm-12 col-lg-4 input-profile"> 
     <label>Start year</label> 
     <input name="editProfile_StudentStartYear{{$index}}" ng-model="education.start_year" required ng-pattern="/^20[0-9]{2}$/" md-maxlength="4"> 
     <div ng-messages="myProfile['editProfile_StudentStartYear' + $index].$error"> 
     <div ng-message="required">This is required.</div> 
     <div ng-message="pattern" class="my-message">Must be a valid year.</div> 
     <div ng-message="md-maxlength">Must be a valid year.</div> 
     </div> 
    </md-input-container> 
    <md-input-container class="col-xs-12 col-sm-12 col-lg-4 input-profile"> 
     <label>End year</label> 
     <input name="editProfile_StudentEndYear{{$index}}" ng-model="education.end_year" ng-pattern="/^20[0-9]{2}$/" md-maxlength="4"> 
     <div ng-messages="myProfile['editProfile_StudentEndYear' + $index].$error"> 
     <!-- <div ng-message="required">This is required.</div>i dont have end year required: student may still be doing the course--> 
     <div id="error5" class="error-message" ng-show="errorMsg5">{{errorMsg5}}</div> 
     <div ng-message="pattern" class="my-message">Must be a valid year.</div> 
     <div ng-message="md-maxlength">Must be a valid year.</div> 
     </div> 
    </md-input-container> 
    <md-input-container class="col-xs-12 col-sm-12 col-lg-4 input-profile"> 
     <label>Average</label> 
     <input name="editProfile_StudentAverage{{$index}}" ng-model="education.average" ng-pattern="/^[1-2]{1}[0-9]{1}(\.[0-9]{1,2})?$/" step="0.01" required/> 
     <div ng-messages="myProfile['editProfile_StudentAverage' + $index].$error"> 
     <div id="error4" class="error-message" ng-show="errorMsg4">{{errorMsg4}}</div> 
     <div ng-message="required">This is required.</div> 
     <div ng-message="pattern" class="my-message">Must be a valid value.</div> 
     </div> 
    </md-input-container> 
    </div> 
    <a class="btn remove-info" ng-show="!$first" ng-click="removeEducation(education)">Remove</a> 
</fieldset> 

的問題是,這些消息只在div的第一個副本渲染(因爲該變量已經在控制器中設置)。 對於剩餘的副本,輸入爲紅色,因爲它沒有設置,這是正確的,但錯誤消息不出現。

當我檢查輸入元素,它顯示

<input name="editProfile_StudentEndYear0" 

這是正確的,但是當我檢查的消息元素,它顯示

<div ng-messages="myProfile['editProfile_StudentEndYear' + $index].$error" 

我在這裏看到了很多的答案是說要使用這種方法,但對我來說這是行不通的。有任何想法嗎?

+0

你是什麼意思的「消息只呈現div的第一個副本」?你的意思是對於每個輸入,只顯示第一個錯誤? –

+0

@bugs_cena只顯示第一個輸入塊 –

+0

是否是'

'或''定義的元素?我假設myProfile是表單的名稱。如我錯了請糾正我。 –

回答

0

這句法在此plunker做工精細:https://plnkr.co/edit/3mTPRAcNmBVHdABMuZEo?p=preview

<form name="myForm" novalidate=""> 
    <div ng-repeat="fieldSet in fieldSets"> 

    <input type="text" required="" name="firstName{{$index}}" ng-model="fieldSet.firstName" /> 
    <div ng-messages="myForm['firstName'+$index].$error"> 
     <div ng-message="required"> 
     This field is required 
     </div> 
    </div> 

    </div> 
</form> 

您使用的是真正的老版本AngularJS的?

+0

我正在使用Angular 1.6.3 –