Question

这是我的代码。在这里，我想显示错误，如果用户按下提交按钮而不填写字段。目前它不起作用。

<form name="loginForm" ng-submit="loginForm.$valid && login()" novalidate autocomplete="off">
<!-- <div class="form_line"> -->
<div class="form-login">
    <div class="form-group" ng-class="{ 'has-error': (loginForm.email.$touched || submitted) && loginForm.email.$invalid }">
        <label for="Email"><span translate="login.Email"></span></label>
        <input type="email" class="form-control" name="email" ng-model="userData.email" required novalidate>
    </div>
    <div class="help-block" ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched">
        <p ng-message="required"><span translate="login.validate-require"></span></p>
        <p ng-message="email"><span translate="login.validate-email"></span></p>
    </div>
    <div class="form-group" ng.class="{ 'has-error': (loginForm.password.$touched || submitted) && loginForm.password.$invalid }">
        <label for="Password"><span translate="login.Password"></span></label>
        <input type="password" class="form-control" name="password" ng-model="userData.password" ng-minlength="4" ng-maxlenght="20" required novalidate>
    </div>
    <div class="help-block" ng-messages="loginForm.password.$error" ng-if="loginForm.password.$touched">
        <p ng-message="required"><span translate="login.validate-psw"></span></p>
        <div ng-message="minlength">Message must be over 8 characters</div>
        <p ng-message="loginForm.password.$error">small password</p>
    </div>
    <div class="form-submit">
        <button type="submit" class="form-login_submit__btn" ng-click="submitted=true" translate="login.login">
            login
        </button>
    </div>

Answer 1

您只需在提交按钮时显示必需错误，因此，在 ng-message 部分中添加：

纳克放映= “登录表单。$提交”

  <div class="help-block" ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched" ng-show="loginForm.$submitted">
    <p ng-message="required"><span translate="login.validate-require"></span></p>
    <p ng-message="email"><span translate="login.validate-email"></span></p>
  </div>

Answer 2

您可以尝试使用ng-required="required"而非required吗？同时从输入字段中删除no-validate

Answer 3

您不必在每个输入控件上添加novalidate。

添加ng-required="true"代替required

   <div class="form-group" ng-class="{ 'has-error': (loginForm.email.$touched || submitted) && loginForm.email.$invalid }">
        <label for="Email"><span translate="login.Email"></span></label>
        <input type="email" class="form-control" name="email" ng-model="userData.email" ng-required="true">
        <div class="help-block" ng-messages="loginForm.email.$error" ng-show="loginForm.email.$touched">
            <p ng-message="required"><span translate="login.validate-require"></span></p>
           <p ng-message="email"><span translate="login.validate-email"></span></p>
        </div>
    </div>

Answer 4

您可以尝试这样：

ng-if="loginForm.email.$error.$dirty || loginForm.email.$error.required"

Answer 5

尝试定义translate属性而不使用短划线＆＃39; - ＆＃39;即。 login.validate-require将其更改为login.validateRequire

Answer 6

我用这段代码完成了

<div class="help-block" ng-messages="loginForm.email.$error" ng-show='loginForm.$submitted || loginForm.email.$dirty || loginForm.email.$touched' role="alert">
<p ng-message="required"><span translate="login.validate-require"></span></p>

或者你可以使用它

<div class="help-block" ng-messages="loginForm.email.$error"
     ng-if="loginForm.$submitted || loginForm.email.$dirty ||loginForm.email.$touched">   
  <p ng-message="minlength"><span translate="login.validate-short">   
</span></p>
 <p ng-message="maxlength"><span translate="login.validate-long">     </span></p> -->
 <p ng-message="required"><span translate="login.validate-require">    </span></p>
<p ng-message="email"><span translate="login.validate-email"></span>    </p>-->
 </div>

提交表格而不填写字段不会显示错误[AngularJS]

6 个答案: