Reputation: 1414
I'm trying to do a validation in angular using ngMessage and min/maxlength, so the scenario is if min != min then the submit button should be disabled. and if not matched button should be disabled too; only allow to submit the form if all is matched and equal.
Also the ng-show isn't working properly because of the min/maxlenght it won't disappear even the password is matched.
<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>
Upvotes: 0
Views: 225