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

Question

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

0

У меня есть форма, на чью кнопку отправки я хочу показать ошибки в форме оповещения, вот мой код. Теперь я показываю ошибки в разных 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>

Anky 06 июль 2015, в 08:24

Источник

Теги:

javascript

angularjs

forms

1 ответ

Ещё вопросы

SuperVeetz · Accepted Answer · 2015-07-06T04-51-00.000Z

ваш 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>

Форма ботстрапа с угловым подтверждением:

           <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. [email protected]"
                       maxlength="40" ng-model="contactMessage.email" required>
              </div>

            </div>

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