I have the below code to select Yes\No for selecting the options from Multi Select dropdown. But It is required only when I select the Yes Option from radio. Otherwise the validation message should disappear when I move from Yes to No. (I am disabling the Multi Select in script when the user selects the No optio)
<input id="Option1" name="MyRadio" ng-model="MyRadioData" type="radio" title="Yes" value="Yes" ng-click="Flip('Yes')" />Yes
<input id="Option2" name="MyRadio" ng-model="MyRadioData" type="radio" title="No" value="No" ng-click="Flip('No')" />No
<select id="MultiSelect1" kendo-multi-select name="MultiSelect1" k-value-primitive="true" k-max-selected-items="30" k-placeholder="multiPlaceHolderVendor"
k-ng-model="MyOptions" k-data-source="MyOptionsDS" ng-required="MyRadioData == 'Yes'" validationmessage="Required"></select>
<span data-for="MultiSelect1" data-role="validator"></span>
But the above code is not working though I have used ng-required option for multi select.
Appreciate any help.
If <span data-for="MultiSelect1" data-role="validator"></span> is where messages put, you can handle with ng-show ng-hide like this:
UPDATE
<!-- if you choose no it hide-->
<span ng-hide="MyRadioData == 'No'" data-for="MultiSelect1" data-role="validator"></span>
<!-- if you choose yes it hide-->
<span ng-hide="MyRadioData == 'Yes'" data-for="MultiSelect1" data-role="validator"></span>
Here is a plnkr with a button but it does the same, i will help you how this work.
Related
I create a list of radio button selections, but the problem is that when clicked, they both remain selected, thus not working as a radio button group at all.
I have the same ng-model (a string; 'model') and ng-change for all of them, but the id is different.
<div class="radio-button"
ng-show="vm.forAdmins"
ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)" >
{{role.name}}
</div>
Been wrestling with this for a while now, can't see what I've missed.
Radio button will work as a group if you assign name property to those radio buttons. I was also facing this issue then I realized my mistake.
<div class="radio-button" ng-show="vm.forAdmins" ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)"
name="roles" >
{{role.name}}
</div>
Try assigning a name attribute to your radio button. name groups the radio button. For example :
<input type="radio" name="someRadio" id="radioOne" />
<input type="radio" name="someRadio" id="radioTwo" />
Now only one is selected at a time.
I'm new to angular so bear with me. I have a form with a dropdown, textbox and a button. The user has to select an option from the dropbox and enter a value in the textbox before the form becomes valid.
<form name='personDataSourceForm' novalidate ng-submit='personDataSourceForm.$valid && PersonCtrl.SaveDataItem()'>
<span>Invalid: {{personDataSourceForm.$invalid}}</span><br />
<span>valid: {{personDataSourceForm.$valid}}</span>
<div class="input-group">
<div class="input-group-addon">
<select class="form-control input-sm" required ng-model='PersonCtrl.sp.person.newItem.dataType' ng-options='opt as opt.text group by opt.dataType for opt in PersonCtrl.DataItemTypes'>
<option value="" disabled selected>Choose...</option>
</select>
</div>
<input type="text" class="form-control input-sm" ng-model='PersonCtrl.sp.person.newItem.value' required>
<div class="input-group-btn">
<button class="btn btn-default btn-sm" ng-class="{ 'btn-success' : PersonCtrl.sp.person.newItem.dataType.dataType && PersonCtrl.sp.person.newItem.value }" type="submit">Save</button>
<button class="btn btn-link btn-sm" type="button" ng-click="PersonCtrl.StopAddItem()">Cancel</button></div>
</div>
</form>
I quickly added 2 spans to show the validation state. When both are empty the form shows invalid which makes sense.
As soon as I type in a value in the textbox then suddenly the form is valid even though the dropdown still hasn't been changed.
Why is my dropdown not getting validated? I've even tried this solution AngularJS Dropdown required validation
My initial thought is that you already have that default value selected:
<option value="" selected>Choose...</option>
so it does technically have a value of "", which is fulfilling the required.
I think you will need to look at PersonCtrl.sp.person.newItem. The form becomes valid when both the dataType and value get solid. My guess is the item always has its dataType solid and valid so when the new value is entered the whole form becomes valid.
Why don't your select ad input have a name attribute? The name attribute is necessary for form validations to work properly.
I think form creates a map of name->validity for each input component and it could be that you have omitted it they both (select and input) map to the same validity object. If this is the case, then anyone becomes valid, effectively makes the status of the other one valid as well and hence they are both valid the form becomes valid.
Please add separate names for them and see if the problem is resolved. My opinion above is a strong guess and I have not dived into Angular code to check ng-form's behaviour.
I want to apply validation on checkbox with toggle effect
<div class="togglebutton form-group has-feedback paddingTopBtn8">
Yes<label> <input type="checkbox" ng-model="checkfield" required data-error="This is an mandatory field">
<div class="help-block with-errors"></div>
<span class="toggle"></span></label>No
</div>
Can anyone please help me. Its not working. I applied required and data-error also but at the time of submit the form shows the ng-valid whether i checked the checkbox or not
Thanks in advance
I am not much clear on what you mean by toggle effect with checkbox.
But i have utilized form validation Example of https://scotch.io/tutorials/angularjs-form-validation and created a small POC for checkbox validation.
PLease have a look here.
<div class="togglebutton form-group has-feedback paddingTopBtn8">
Yes<label> <input type="checkbox" ng-model="user.checkfield" required
name="checkfield">
<p ng-show="userForm.checkfield.$invalid && !userForm.checkfield.$pristine"
class="help-block">Please toggle.</p>
<span class="toggle"></span></label>No
</div>
CodePen Example
I think you only need:
<input type="checkbox" ng-model="checkfield" required data-error="This is an mandatory field" checked data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger">
I have a page with a check box representing "All dates" and two input fields which represent the start date and end dates. When the page first loads the check box is unchecked. The requirement is if the check box is unchecked and there is nothing in the start and end date fields a message must display to the user.
This is what I have for the check box and input fields and the error message:
<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="$parent.vm.selectedReport.Parameters.StartDate == null || $parent.vm.selectedReport.Parameters.EndDate == null" />All Available Dates
<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.StartDate"
is-open="beginningDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.EndDate"
is-open="endDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
Please select
This is what I have in the controller at the beginning:
vm.selectAllDates = false;
This is what I have in the submit function:
if ($scope.reportForm.$valid) {
//do stuff
}
else
{
$scope.reportForm.submitted = true;
}
If the form is "valid" when I hit the submit button a modal window will display.
What's happening is the page loads and if I don't enter in dates or check the check box and I hit submit, the message appears and I can't submit which is fine.
When I check off the check box the message stays but I can submit.
When I uncheck the check box and enter dates the message stays but I can submit.
How do I hide the message once any of the conditions have been met? Sorry! I'm still a newbie at Angular.
I'm not sure this is "best practice", but you could use your form's validity to show/hide the message (since you've already setup the validation conditions).
You should be able to use something like
<p ng-show='reportForm.$valid'>Error Message</p>
Alternatively, you can manually setup a $watch on your form's validity to do any other logic you might need
$scope.$watch('reportForm.$valid', function(isValid) {
//change some value to show/hide the message
//any other logic for a change in validity
});
Okay, I figured it out.
For the checkbox I put this:
<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates
For the start date I put this:
<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.StartDate"
is-open="beginningDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
For the end date I put this:
<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.EndDate"
is-open="endDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
And for the message I put this:
<div ng-show="reportForm.submitted || reportForm.dateSelectAll.$touched || reportForm.beginningDate.$touched
|| reportFrom.endDate.$touched">
<span class="error" ng-show="reportForm.dateSelectAll.$error.required || reportForm.beginningDate.$error.required || reportFrom.endDate.$error.required">Please select a Dissolved date</span>
</div>
I kept the code in the controller the same as what I put in my original post.
Thanks #ryanyuyu for answering so quickly. And thanks #DrCord for the info. I'll have to remember that!
In my form i got a dropdown with Yes / NO option , when user selects yes additional input box will be displayed and allows user to enter some value input box.
how can i validate input box using angularjs ngmessages only if it is visible or value in dropdown is 'Yes'?
html code
<div class="col-xs-8">
<select ng-model="userAvailable">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<input ng-show="userAvailable == 'yes'" placeholder="If yes , add name?" type="text" class="form-control" />
</div>
Thanks in advance.
Try using ng-if instead of ng-show. ng-show removes it from the DOM so the validation doesn't execute on it. ng-show just hides it.
<input ng-if="userAvailable == 'yes'" placeholder="If yes , add name?" type="text" class="form-control" />