在angularjs中的表單控制器中包含的指令中的輸入字段的驗證

Question

您好我是angularjs的新手，我想驗證輸入必填字段，我將它創建爲指令幷包含在html頁面中的表單內。我的指令模板頁面

<div class="field"> 
    <label for="lastName">{{::"SYSTEM_USERS.LAST_NAME_LABEL" | translate}}</label> 
    <input id="lastName" name="lastName" type="text" ng-model="systemUserInfo.lastName" ng-class="{'error': errorMessages.lastName.$error.required}" required/> 
    <div ng-messages="errorMessages.lastName.$invalid" class="errors" ng-show="errorMessages.lastName.$invalid" role="alert"> 
    <div ng-message="required" class="field-error"> 
     Required Field 
    </div> 
</div> 

，我包括在該指令的形式控制器內部是一個

<system-user-form user="e" show-errors="showSystemUserErrors" id="{{$index}}"></system-user-form> 

，當我在下面的按鈕點擊我想在上面的html錯誤信息頁。

<button type="submit" class="secondary-big-button" ng-click="validtest()" ng-disabled="!editSystemUserForm.$dirty">SAVE</button> 

Answer 1

爲了在窗體中顯示錯誤消息，它應該有一個名稱。你也應該將表單名稱傳遞給指令。請參閱下面的代碼片段。

<form name="errorMessages"> 
    <system-user-form form-name="errorMessages" user="e" show-errors="showSystemUserErrors" id="{{$index}}"></system-user-form> 
</form> 

在指令中，您應該使用傳遞的表單名稱。

<div class="field"> 
    <label for="lastName">{{::"SYSTEM_USERS.LAST_NAME_LABEL" | translate}}</label> 
    <input id="lastName" name="lastName" type="text" ng-model="systemUserInfo.lastName" ng-class="{'error': formName.lastName.$error.required}" required/> 
    <div ng-messages="formName.lastName.$invalid" class="errors" ng-show="formName.lastName.$invalid" role="alert"> 
     <div ng-message="required" class="field-error"> 
      Required Field 
     </div> 
    </div> 
</div> 

並且不要忘記將formName添加到指令的作用域。欲瞭解更多信息，請參考question。