验证angularjs中表单控制器中包含的指令中的输入字段

嗨，我是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>

{{：：“系统用户.姓氏标签”{124;翻译}
必填字段

我把这个指令作为一个

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

保存

为了在表单中显示错误消息，它应该有一个名称。您还应该将表单名称传递给指令。请参阅下面的代码片段

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

{{：：“系统用户.姓氏标签”{124;翻译}
必填字段

---

别忘了将formName添加到指令的作用域中。有关更多信息，请参阅此

你能用这个代码提供一个plunkr或JSFIDLE吗？