Angular JS 中的强制字段验证

Question

我正在尝试提交一个空白表单，这应该会触发我的必填字段上的一些自定义错误消息。所有验证工作完美。唯一的问题是当表单第一次加载并且用户直接单击提交按钮而不单击表单中的任何位置时。因此，会显示 Checkbox 错误消息，但不显示输入标签错误消息。自定义指令 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)">

Answer 2

关于这个的一些事情：

你确定吗？

1. 您当前的代码示例实际上并未显示<form> 标记。
2. 您是否考虑过在表单无效时禁用提交按钮？
3. 为什么不显示创建验证问题？为什么要让用户等到他们认为他们已准备好提交表单，然后然后告诉他们他们搞砸了？对我来说似乎是糟糕的用户体验。

好的，所以你确定，接下来就是你要做的：

综上所述，您可以通过 ng-click 和 ng-submit 一起工作来完成您正在尝试的事情：

你的看法：

<form name="myForm" ng-submit="submitForm()">
  <label>Name <input type="text" name="name" ng-model="name" required/></label>
  <span ng-show="myForm.name.$error.required && buttonClicked">required</span>
  <button ng-click="buttonClicked = true">Submit</button>
</form>

和你的控制器：

app.controller('MainCtrl', function($scope, $window) {
  $scope.name = 'World';

  $scope.submitForm = function (){
    $window.alert('form submitted!');
  }
});

还有gratuitous Plunk

其他：

如果您使用 Angular 表单验证和 ng-submit，则不必担心 $event.preventDefault()。通常，您几乎永远不需要使用 $event，其中嵌套了 ng-clicks 的异常，即使这样您也可以直接在视图上使用它......但这是一个不同的主题。

同样，一般来说，您几乎不需要从控制器中引用您的 ngModels（存储在您的 $scope.formNameHere 中）。如果是，您可能想调查是否有更好的、可重用的方法来执行您正在做的任何事情……比如自定义验证指令。

希望对你有帮助。

Answer 3

在提交/点击时使用它：

var submitValidate = function(_form) {
    for (field in _form) {
        // look at each form input with a name attribute set
        // checking if it is pristine and not a '$' special field
        if (field[0] != '$' && _form[field].$pristine) {
            // set it to the current model value (ie. leaving as is)
            _form[field].$setViewValue(_form[field].$modelValue);
        }
    }   
};

编辑：

我现在在这里包含了一个工作小提琴，它使用上述功能来解决您的问题。首先点击提交按钮进行测试： http://jsfiddle.net/HB7LU/1804/