Как проверять форму только при отправке и показывать сообщения об ошибках в форме оповещения в угловых?

0

Я хочу создать форму, которая проверяет правильность только тогда, когда пользователь нажимает кнопку отправки, и что тоже ошибка должна появиться как всплывающее окно типа бутстрапа или предупреждение, я очень новичок в угловой, я не понимаю, как это реализовать.

вот моя форма

<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>
Теги:
forms

1 ответ

0

я попытался как-то показать подтверждение в divs внутри формы после нажатия кнопки отправки и создал переменную, представленную и установив ее в true в функции studentSubmit, теперь я хочу, чтобы эти сообщения отображались в окне предупреждения на экране, мне идея о том, как сделать это

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню