Form Validation and disabled button - angularjs

PLUNKER LINK
In above problem i have three radio buttons which let the user pay balance,minimum amount and other
amount.When user clicks on third radio button it opens up a div with input where user can enter their
amount and this field has some validation. And it followed up with some validation on next fieldset.
I want to disable the submit button until the form is valid. But even if I choose balance or minimum amount payment options in radio button, the submit button remains disabled (waiting for form to be valid. Probably looking for validation, which is on third option). How can i avoid this ?
HTML
<fieldset class="form-group clearfix">
<legend class="">Fieldset Title</legend>
<ul class="vList">
<li>
<input type="radio" class="" name="balancePayment" id="payBalance" ng-model="pay"
value="balanceAmount" />
<label class="" for="payBalance"> Balance:$130 </label>
</li>
<li>
<input type="radio" class="form__radio" name="balancePayment" id="payMinimum" ng-model="pay"
value="minimumAmount"/>
<label class="" for="payMinimum"> Minimum Amount:$4 </label>
</li>
<li>
<input type="radio" class="" name="balancePayment" id="payOther" ng-model="pay"
value="otherAmount"/>
<label class="form__radioLabel" for="payOther"> Pay Different Amount </label>
</li>
</ul>
<div class="otherpayment" ng-show ="pay=='otherAmount'" ng-class="{
'has-error': myform.otherAmountpay.$invalid && myform.otherAmountpay.$dirty,
'has-success':myform.otherAmountpay.$valid}">
<span class="help-block" ng-show="myform.otherAmountpay.$error.required &&
myform.otherAmountpay.$dirty">Please enter your payment</span>
<input id="Tel1" name="otherAmountpay" ng-model="otherAmountpay"
class="form-control" type="number" required=""/>
</div>
</fieldset>

It is because the otherAmountpay field is still invalid as it has been marked as required, even though not displayed angular will still validate it. So you need to make the "required" constraint conditional on your textbox based on when you need to validate it (only when "other pay" is selected). You can use ng-required. i.e ng-required="pay=='otherAmount'", set required field only when the option other amount is selected.
<input id="Tel1" name="otherAmountpay" ng-model="otherAmountpay"
class="form-control" type="number" ng-required="pay=='otherAmount'"/>
Plnkr

Related

Input text is empty using ng-model if value is provided

I passed an array value in my view with $userdata.
In my view, there's a button there that will show a modal when triggered. This modal will show the user data using the $userdata variable.
Now, I used angular js for my form inputs.
For example:
div class="form-group">
<label for="company_name" class="col-sm-12 control-label">Company Name</label>
<div id="company_name" class="col-sm-12">
<input type="text" class="form-control" name="company_name" value="{{$userData['company']['name']}}" ng-model="user.company_name" ng-required="true">
</div>
<div class="col-sm-12">
<span ng-show="userForm.company_name.$error.required && userForm.company_name.$touched"><br> <small><i>Name field is required</i></small></span>
</div>
</div>
The problem here is the input is not showing any value.
Why so? But when I removed the ng-model and just used a plain input field, the value will be shown.
You have to remove value="..." from input, ng-model will control it. look at this example.
<input type="text" class="form-control" name="company_name" ng-model="user.company_name" ng-required="true">

angularjs error handling executes even without entering data in the form field

Why do I get the success message even without entering something or even without touching the field?
<div class="form-group"
ng-class="{'has-error':Form.description.$invalid, 'has-success':Form.description.$valid}">
<label class="control-label" translate="dashboard.field1"></label>
<input class="form-control" ng-model="model.field1"
ng-minlength=3 ng-maxlength=20
type="text" name="description"
placeholder="Enter your text"/>
<span class="error text-small block"
ng-if="Form.description.$error.maxlength">Too long!</span>
<span class="error text-small block"
ng-if="Form.description.$error.minlength">Too short!</span>
<span class="success text-small" ng-if="Form.description.$valid"> Success!</span>
</div>
update:
this form field is not required as you see in my input parameters. I just want to control the input text with min and max, if ever the user wants to put in text so that it meets these requirements; but the field itself should not be required, because when I submit the form, I don't want it to prevent the user from submitting it just because one field was left out.
Its because the empty is valid, even with the min length. If empty is not valid you should add the required attribute.
Or, you can add the $dirty on the ng-if. Now it only shows success if the user type something. But, if the user erase the input text the description is still "dirty".
Or, as I suspect is what you need, change the ng-if="Form.description.$valid && model.field1". Now the Success will show only if is valid (3 - 20) and is not empty.
<form name="Form">
<div class="form-group" ng-class="{'has-error':Form.description.$invalid, 'has-success':Form.description.$valid}">
<label class="control-label" translate="dashboard.field1"></label>
<input class="form-control" ng-model="model.field1" ng-minlength=3 ng-maxlength=20 type="text" name="description" placeholder="Enter your text" />
<span class="error text-small block" ng-if="Form.description.$error.maxlength">
Too long!
</span>
<span class="error text-small block" ng-if="Form.description.$error.minlength">
Too short!
</span>
<span class="success text-small"
ng-if="Form.description.$valid && model.field1"> Success!</span>
</div>
This happens because when your angular bootstraps the form in turn will be replaced with error attributes to elements.To avoid this pitfall for the first time,Use
$dirty:Checks if the element is made dirty
<span class="error text-small block" ng-if="Form.description.$dirty && Form.description.$error.maxlength">
Too long!
</span>

Angular JS validation - not to validate disabled field

I have one checkbox/radio after clicking on it some fields will be shown and in that some fields need to be marked as mandatory and some fields are not mandatory. This mandatory conditions is applied before showing those fields and those are also disabled before showing but I am unable to submit the form because of that.
I don't want these kind of fields to be validated when disabled. Validation should work when I click on radio button.
Can anybody help me in this how to do this???
<div class="col-lg-6">
<div class="form-group">
<label class="control-label">{{controls.label}}</label>
<input type="checkbox" class="form-control input-lg mandatory" ng-model="formData[$parent.$parent.$index][controls.id]" value="{{controls.value}}" name="control_{{$parent.$parent.$index}}_{{controls.id}}" ng-required="{{controls.mandatory}}">
<div ng-show="submitted && profilecreate.control_{{$parent.$parent.$index}}_{{controls.id}}.$error.required" class="error_message">This field is required</div>
</div>
</div>
<div class="col-lg-6" ng-repeat="child in controls.children">
<div class="form-group" ng-hide="!formData[$parent.$parent.$index][child.parentId]">
<label class="control-label">{{child.label}}</label>
<input
type="{{child.type}}"
id="{{$parent.$parent.$index}}_{{child.id}}"
ng-model="formData[$parent.$parent.$index][child.id]"
name="control_{{$parent.$parent.$index}}_{{child.id}}"
ng-disabled="!formData[$parent.$parent.$index][child.parentId]"
ng-required="{{child.mandatory}}"
ng-class="!formData[$parent.$parent.$index][child.parentId] ? 'disabled' : 'normalinput'">
<div ng-show="submitted && profilecreate.control_{{$parent.$parent.$index}}_{{child.id}}.$error.required" class="error_message">This field is required</div>
</div>
</div>
The reason it's triggering validation even though it's disabled is because you are using ng-hide and not ng-if. Try changing that and it might work.
Here is the difference between ng-if and ng-show/hide

Angular js ng-model

There are two buttons, through which popup is opened,
I have input field in that popup and applied validations on that input field.
If I close the popup and clicks on second button then input value is already got filled, because I used same input field to reduce code.
How to reset that ng-model value of input field?
I tried to set it null on click of close button, but after clicking on second button it set null but shows valiation errors on first time.
How to achieve this functionality using same input field?
<form name="vm.pvtZipCodeSearchForm" id="pvtZipCodeSearchForm" class="clearfix">
<div class="alert alert-danger" ng-if="vm.errorMsg">{{vm.InvalidAddressError}}</div>
<fieldset class="form-control form-control-wrapper">
<div class="fields">
<input type="text" class="form-control" placeholder="{{vm.lang.tcZipCode}}Postnummer*" title="{{vm.lang.tcZipCode}}*" name="zipCode" maxlength="5" ng-model="vm.tariff.zipCode" ng-maxlength="5" ng-minlength="5" ng-required="!disable" />
<div ng-if="vm.isValidForm" class="error-message" ng-messages="vm.pvtZipCodeSearchForm.zipCode.$error" role="alert">
<div ng-message="required">{{vm.lang.errMsgBlankField}}</div>
<div ng-message="minlength">{{vm.lang.errMsgShortField}}</div>
<div ng-message="maxlength">{{vm.lang.errMsgLongField}}</div>
</div>
</div>
<br />
<div class="fields tac">
<button type="button" ng-click="vm.tcSearchZipCode()" class="tc___button--search">{{vm.lang.search}}</button>
</div>
</fieldset>
</form>
You can try setting
vm.pvtZipCodeSearchForm.zipCode.$pristine = true;

AngularJs Radio Button Dynamic Required / Not Required

I am building a CMS which allows one to add all kinds of form fields, one of which is a radio button.
I am allowing the user to specify whether the radio button is required / not required. If its required, then user has to select a radio button, otherwise a message will be displayed.
Problem is i have been unable to get the validation to work. I.e. data-ng-required.
<div class="radio" data-ng-repeat="option in formField.options">
<label>
<input type="radio"
data-ng-attr-id="{{formField.fieldId}}"
name="{{formField.fieldId}}"
value="{{option}}"
data-ng-model="pageForm.dynamicFormField[formField.fieldId]"
data-ng-required={{formField.required}}>
{{option}}
</label>
</div>
<!-- messages -->
<span class="help-block"
data-ng-show="_pageForm[formField.fieldId].$error.required && formSubmitted.pageForm">{{formField.labelDisplayText}} is required
</span>
<div class="radio" data-ng-repeat="option in formField.options">
<label>
<input type="radio"
data-ng-attr-id="{{formField.fieldId}}"
name="{{formField.fieldId}}"
value="{{option}}"
data-ng-required="formField.mandatoryField === true ? !pageForm.dynamicFormField[formField.fieldId] : false"
data-ng-model="pageForm.dynamicFormField[formField.fieldId]">
{{option}}
</label>
</div>
<!-- messages -->
<span class="help-block"
data-ng-show="_pageForm[formField.fieldId].$error.required && formSubmitted.pageForm">{{formField.labelDisplayText}} is required
</span>

Resources