使用angular js单击提交按钮后，如何在警报框中显示错误？

Question

我在其提交按钮上有一个表单，我想以警报形式显示错误，这是我的代码。现在我正在不同的div中显示错误，我想在一个警报中显示所有必需的错误。我没有任何线索去做这个。

<div class="main-container version-msg-wrapp loginpage-bg">
    <div class="login-inner-container">
        <div class="logo-cont"></div>
        <div class="inputs-container">
            <form name="userLogin"  ng-submit="submitForm(userLogin.$valid)" novalidate>

                <div class="input-element-row">

                    <div class="rgt-input-box fl"><span class="center-icon action-icon"></span><input type="text"  id="c_code" ng-model="Nuser.centerCode" placeholder="Center Code" name="centerCode" value=""   ng-minlength=3
                                                                                                      ng-maxlength=5 required/></div>
                    <div class="cb">
                    </div>
                </div>

                <div class="input-element-row">
                    <div class="rgt-input-box fl"><span class="user-icon action-icon"></span><input type="text" id="u_id" placeholder="User ID"  ng-model="Nuser.userID" name="userID" value="" ng-maxlength="20" required/></div>
                    <div class="cb"></div>
                </div>


                <div class="input-element-row">
                    <div class="rgt-input-box fl"><span class="pswd-icon action-icon"></span><input type="password" id="pwd" placeholder="Password" ng-model="busyUser.password" name="password" value="" required /></div>
                    <div class="cb"></div>
                </div>

                <div class="input-element-row">
                    <button type="button" name="" value="" ng-click="StudentSubmit()">Login</button>
                </div>

                <div ng-show="submitted && userLogin.centerCode.$dirty && userLogin.$invalid" class="alert alert-danger">
                    <div ng-show="userLogin.centerCode.$error.required">
                        Center code is required.
                    </div>
                    <div ng-show="userLogin.centerCode.$error.minlength">
                        Enter min 3 characters
                    </div>
                    <div ng-show="userLogin.centerCode.$error.maxlength">
                        Enter max 5 characters
                    </div>
                </div>

                <div ng-show=" submitted && userLogin.userID.$dirty && userLogin.userID.$invalid " class="alert alert-danger">
                    <div ng-show="userLogin.userID.$error.required">
                        User Id is required.
                    </div>
                    <div ng-show="userLogin.centerCode.$error.maxlength">
                        Enter Max 20 characters only
                    </div>
                </div>

                <alert ng-show="submitted && userLogin.password.$dirty && userLogin.password.$invalid" class="alert alert-danger">
                    <alert ng-show="userLogin.password.$error.required">
                        enter password
                    </alert>

                </alert>

            </form>

    <div class="input-element-row">
        <div class="forgot-pass"><a href="#/forgotPassword">Forgot password?</a></div>
    </div>

</div>

</div>
</div>

Answer 1

您的input应如下所示

<input type="text" id="u_id" placeholder="User ID" ng-model="Nuser.userID" name="u_id" value="" maxlength="20" minlength="4" required/>

您可以像这样显示警报

<div ng-show="userLogin.$submitted && userLogin.u_id.$invalid">
                    User Id is required.
                </div>

具有angularJS验证的Bootstrap表单：

           <div class="form-group">

              <label class="col-sm-2 control-label" for="contactEmail">Email:</label>

              <div class="col-sm-4 col-sm-push-6">
                <div class="alert alert-danger" role="alert"
                      ng-show="contactForm.$submitted && contactForm.contactEmail.$invalid">
                  <strong><i class="fa fa-exclamation"></i> Error:&nbsp; </strong>
                  <span class="alert-inner">Email is too short.</span>
                </div>
              </div>

              <div class="col-sm-6 col-sm-pull-4">
                <input type="email" class="form-control" id="contactEmail" name="contactEmail"
                       placeholder="Ex. johndoe14@gmail.com"
                       maxlength="40" ng-model="contactMessage.email" required>
              </div>

            </div>