проверка угловых форм для подтверждения пропуска

0

Я пытаюсь выполнить проверку в угловом режиме с использованием ngMessage и min/maxlength, поэтому сценарий равен min! = Min, тогда кнопка отправки должна быть отключена. и если не соответствующая кнопка также должна быть отключена; только разрешить отправку формы, если все согласовано и равно.

Кроме того, ng-show работает неправильно из-за минимума/максимума, он не исчезнет даже при совпадении пароля.

http://jsfiddle.net/tkgfa1qh/

<input required 
                            data-ng-model-options="{debounce: 1000}" 
                            data-ng-model="vm.registerForm.Password" 
                            class="form-control search-input inverted text-box single-line text-box single-line"
                            data-val="true" data-val-required="The password field is required." 
                            id="register-password" 
                            name="password" 
                            placeholder="Password"
                            type="password" 
                            value=""
                            data-ng-minlength="6"
                            data-ng-maxlength="12"/>
                            <span data-ng-show="vm.registerForm.Password !== vm.registerForm.ConfirmPassword" style="color: red;">Password is not matched</span>
                        <div class="mt-10" data-ng-messages="registerForm.password.$error">
                            <!--<p data-ng-message="vm.registerForm.Password !== vm.registerForm.ConfirmPassword">Password is not matched</p>-->
                            <p data-ng-message="minlength">Password is too short (min of 6 characters)</p>
                            <p data-ng-message="maxlength">Password is too long (max of 12 characters)</p>
                        </div>
                    </div>
                    <div class="col-sm-6 ">
                        <label for="register-confirm-password" class="hidden">Confirm Password </label>
                        <input 
                            required 
                            data-ng-model="vm.registerForm.ConfirmPassword" 
                            class="form-control search-input inverted text-box single-line text-box single-line"
                            data-val="true" 
                            data-val-required="The password field is required." 
                            id="register-confirm-password" 
                            name="ConfirmPassword" 
                            placeholder="Confirm Password"
                            type="password" 
                            value=""/>
                    </div>
                </div>

                <div class="form-group clearfix">
                    <div class="col-sm-12">
                        <label for="submitForm" class="hidden">Submit</label>
                        <input 
                            data-ng-disabled="vm.registerForm.Password !== vm.registerForm.ConfirmPassword ? vm.registerForm.Password : disabled || registerForm.$invalid
                            || registerForm.Password.$error.minlength < registerForm.Password.$error.minlength"
                            type="button" 
                            id="submitForm" 
                            data-ng-click="vm.postRegisterForm()" 
                            value="Register" 
                            class="btn-main maxw-200" 
                            data-ng-class="{'orange': registerForm.$valid}">
                    </div>
                </div>
  • 0
    Где вы объявляете ng-app ?
  • 0
    в теге html извините забыл включить его в скрипку
Теги:

1 ответ

0

См. Этот обновленный JSFIddle, где я добавил ng-app. И включил ngMessages.

JavaScript

var app = angular.module("MyApp", ["ngMessages"]);

HTML

<form ng-app="MyApp" action="" name="registerForm">
  • 0
    Форма работает, только условия, которые не работают должным образом. Не могу обдумать это.
  • 0
    Это работает для меня, как и ожидалось в Chrome.
Показать ещё 3 комментария

Ещё вопросы

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