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>
Related
I am doing one register page using angularjs.
Follows my html code:
<form name="frominline" action="post" class="clearfix form-hidden" id="Register-form">
<div class="col-md-12">
<div class="input-group blmd-form">
<div class="blmd-line">
<input type="text" name="userid" autocomplete="off" id="username" class="form-control" required autofocus="" ng-model="user.name" ng-minlength="3" ng-maxlength="12" ng-model-options="{ allowInvalid: true }">
<label class="blmd-label">User Id</label>
</div>
<p class="login-error" ng-show="frominline.userid.$dirty && frominline.userid.$error.required">
<span style="color : red">required</span>
</p>
<p ng-show="frominline.userid.$error.minlength" class="help-block" style="color:red;">Username is too short.</p>
<p ng-show="frominline.userid.$error.maxlength" class="help-block" style="color:red;">Username is too long.</p>
</div>
<div class="input-group blmd-form">
<div class="blmd-line">
<input type="email" name="email" autocomplete="off" id="email" class="form-control" required autofocus="" ng-model="user.email">
<label class="blmd-label">Email</label>
</div>
<span class="login-error" ng-show="frominline.email.$error.required && frominline.email.$dirty" style="color:red;" ng-model-options="{ allowInvalid: true }">required</span>
<span class="login-error" ng-show="!frominline.email.$error.required && frominline.email.$error.email && frominline.email.$dirty" style="color:red;">invalid email</span>
</div>
<button type="reset" ng-click="resetform(frominline)">reset</button>
</form>
My js code:
app.controller('loginCtrl'['$scope',function('$scope'){
var user = this;
$scope.resetform(form){
user.name='';
user.email='';
$scope.frominline.$dirty = false;
$scope.frominline.$pristine = true;
$scope.frominline.$submitted = false;
}]);
Now, in first image, those are the validation errors.
Now, I hit the reset button and the validation errors are gone but in the second image I got required field.
Can you please help me removing or reseting the whole form on a button click?
I tried with many options like $setPristine() or $setValidity() but i can't fix this issue "required" error message.
Follows the image of the form with only required error message after clicking reset button:
The form is probably cleared, but those input fields are not. When you are display the error for a particular field (e.g. ng-show="frominline.userid.$error.minlength") include the state of the form as well (e.g. ng-show="frominline.$submitted && frominline.userid.$error.minlength").
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
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
I am using angular validation on an html page, where I have defined a form along with validation on the form. However, when I run the page, all the validations I have used on the page is visible. Is there a way I can hide all the validations?
<form ng-controller="validateCtrl"
name="loginForm" novalidate>
<p>UserName:<br>
<input type="text" name="uName" ng-model="uName" required>
<span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid && loginForm.uName.$error.required">
Username is required
</span>
</p>
<p>Password:<br>
<input type="text" name="pwd" ng-model="pwd" required>
<span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
<span ng-show="loginForm.pwd.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit" ng-click="popupuser()"
ng-disabled="loginForm.$invalid ">
</p>
</form>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
Your code for form is fine please see here http://jsbin.com/figuve/1/edit
Make sure that your validateCtrl exist otherwise validation will not work plase see here
http://jsbin.com/figuve/2/edit
or
remove ng-controller="validateCtrl" from your form if you don't need it.
please see here http://jsbin.com/figuve/3/edit
You can try use variable to check is form submited, like that
<span ng-show="(loginForm.uName.$dirty || isSubmitted) && loginForm.uName.$error.required">Username is required</span>
I have this HTML set up
<input type="radio" value="yes" ng-model="sa" style="width:10px;"> Yes
<input type="radio" value="no" ng-model="sa" style="width:10px;"> No
<br /><br />
<div ng-show="sa == 'yes'">
<textarea form-title="Please outline your requirements" title-placement="top" ckeditor ng-model="form.equal.interviewArrangements"></textarea>
<br /><br />
<p class="alert alert-error warning" ng-show="errorAt[14]">
Please enter your requirements or choose no above
</p>
</div>
<input type="button" class="btn btn-primary nextStep" value="Send Application" ng-click="sendApplication()" />
Which all works fine, the div is shown when the radio yes is selected, now in sendApplication() I have this line
log($scope.sa);
That is always logged as undefined, no matter what radio box is selected. What have I got wrong?
If in my controller I add $scope.sa = 'no'; by default the radio is set to No which is corrent, but when I change it to yes, and then log the variable it always logs as no.
In short, you should respect the "dot rule":
<input type="radio" value="yes" ng-model="data.sa" style="width:10px;">
<!-- … -->