javascript - Angular JS 中的必填字段验证

Question

我正在尝试提交一个空白表单，这应该会在我的必填字段上触发一些自定义错误消息。所有验证工作完美。唯一的问题是当表单第一次加载并且用户直接单击提交按钮而不单击表单中的任何位置时。因此，会显示复选框错误消息，但不会显示输入标签错误消息。自定义指令 emailValidate 使用正则表达式验证模糊事件中的电子邮件地址。

有什么方法可以让我在提交按钮上显示输入标签的错误消息，如果它是空的，单独点击。

请在下面找到我的代码-

HTML 代码 -

    <div ng-controller="NewsletterController" class="overlayContent" id="newsletterOverlayContent" novalidate>

<p>
    <label>Email<span class="mandatory">*</span></label>
    <input type="email" ng-model="user.email" email-validate required name="email" />
    <span class="ui-state-error h5-message" ng-show="_ServerForm.email.$error.emailValidate && _ServerForm.email.$error.required">
        <span class="h5-arrow"></span>
        <span class="h5-content">Error</span>
    </span>
</p>

<p class="align">
    <input type="checkbox" ng-model="user.termsagreement" name="termsagreement" value="true" required id="TermsAndConditions">
    <span class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required && buttonClicked">
        <span class="h5-arrow"></span>
        <span class="h5-content">I agree</span>
    </span>
    <span class="checkBoxText">
        <span class="mandatory">*</span>Check the box
    </span>
</p>

<div style="float:right" class="buttonSimple">
    <a name="Register" id="RegisterUser" href="#" class="" ng-click="submitform($event)"><span>Registrieren</span></a>
</div>

Controller.js

    function NewsletterController($scope) {
       $scope.submitform = function ($event) {
       $event.preventDefault();
       $scope.buttonClicked = true;
       }
     }
     NewsletterController.$inject = ['$scope'];

Answer 1

@MWay - 我正在研究某些最佳实践，发现不推荐使用 for Loop 是 Angular JS。

所以我得到的解决方案是 -

     <span class="ui-state-error h5-message" ng-show="(_ServerForm.email.$dirty && _ServerForm.email.$error.emailValidate) || (buttonClicked && _ServerForm.email.$invalid)">