如何仅在提交警报时以表单形式验证表单并以角的警报形式显示错误消息？

Question

我想创建一个仅在用户单击“提交”按钮时检查验证的表单，并且该错误也应出现，如引导程序类型的弹出窗口或警报，我对angular非常陌生，但我没有实现此方法。

这是我的表格

<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" novalidate>

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

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

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

                    <div class="rgt-input-box fl"><span class="user-icon action-icon"></span><input type="text" 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" 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.maxLength">
                        Enter Max 5 characters only
                    </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>

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


            </form>

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

        </div>

</div>

Answer 1

我已经尝试过这样的尝试，以便在单击“提交”按钮并创建一个已提交的变量并将其设置为“ studentSubmit”函数中将其设置为true之后，将验证显示到表单内的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.maxLength">
                        Enter Max 5 characters only
                    </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>

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