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。

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

1 个答案: