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" />
Related
I'm experiencing a problem whereby the validation messaging doesn't seem to be firing for the below input. The appearance of this input is entirely dependent on another input (i.e. only show if they're still at school). What I've noticed is that, when I remove the ng-if regarding the display of this input, the validation messaging is fine and happens straight away. When ng-if is present however, it only shows the message if the value selected is invalid when ng-if has been satisfied. Any ideas?
HTML
<div ng-if="showSchoolLeavingYear()">
<label for="ddlSchoolLeavingYear">School leaving year:</label>
<select name="schoolLeavingYear" id="ddlSchoolLeavingYear" ng-model="session.form.schoolLeavingYear" required>
<option value="">- Please select -</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div class="ng-hide" validation-message field="schoolLeavingYear">Please select your school leaving year.</div>
</div>
If the ng-if asserts to false it removes the entire <div> from the DOM. Use ng-show so that the validation on those input fields still happens. Furthermore you need to close the <div> tag of the ng-if/ng-show so that it does not aply to the nested "error message div" like so:
<div ng-show="showSchoolLeavingYear()">
<label for="ddlSchoolLeavingYear">School leaving year:</label>
<select name="schoolLeavingYear" id="ddlSchoolLeavingYear" ng-model="session.form.schoolLeavingYear" required>
<option value="">- Please select -</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
<div class="ng-hide" validation-message field="schoolLeavingYear">Please select your school leaving year.</div>
This Is my select tag. i want to make this As editable.
if possible change this as Input text.
here my ng-model is object showing as list.productcode.
<select class="default form-control" ng-options="list.productcode for list in getproductList" ng-model="list"></select>
please help how to change this.
This may help you
datalist
is the html5 tag
<input type="search" ng-model="txtModel" list="list" />
<datalist id="list" ng-model="list">
<option data-ng-repeat="data in list" value="{{data.ColumnName}}">
</option>
</datalist>
Note ColumnName is the Name of Column you can use
Following is my code snippet. I want to validate my select box using angular.
<form name="myForm">
<select name="category_1" ng-model="catid" id="category_1" ng-options="category.catid for catid in categories" required>
<option value="" selected=""></option>
<option value="1">music</option>
<option value="2">internet</option>
</select>
<button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
</form>
but can not submit the form I got this error in chrome,,and submit button is not working
An invalid form control with name='category_0' is not focusable.
here is the plunker
The problem is not the select box, maybe the problem is that you have another select box (with name category_0) or other input field (with name category_0), which has the required attribute and it is hidden or is not visible.
So when you try to submit your form, it tries to focus it, but is not possible. Make sure that the element with name category_0 is not inside an ng-hide block, or inside an ng-show with a false condition.
I'm having trouble with a form using angularjs/php/mysql to make a quite simple CRUD.
My form pass correctly the text inputs but I can't pass the <select> value.
The ng-option expression below is wrong but I can't find how to write it.
<div ng-controller="formController">
<form ng-submit="addVinyl()" novalidate class="simple-form">
Owner: <select ng-model="vinyl.owner" ng-options="user.name for user in users"></select><br />
Title: <input type="text" ng-model="vinyl.name" /><br />
Artist: <input type="text" ng-model="vinyl.artist" /><br />
<input type="submit" value="Add Vinyl" />
</form>
</div>
gives this html:
<option value="0">hey</option>
<option value="1">hoy</option>
<option value="2">hay</option>
My php file gets the good values of the text inputs but doesn't get the '0', '1', '2' or the 'hey', 'hoy', 'hay'... I tried to display vinyl.ownerand I got {"NAME":"hey"} for the first option selected.
ng-options is not the same as ng-repeat
The correct syntax for your purpose is :
ng-options="user.name as user.name for user in users"
This is due to the fact that you need a value for the attribute value, and that you need a "display text".
find more information inside documentation :
https://docs.angularjs.org/api/ng/directive/ngOptions
Hi I am new to angular js.
I want to know how to disable drop down when checkbox is unchecked in angular js.this is the code i have been trying...
Click me:
<input type="checkbox" ng-model="checked"><br/>
<div>
<div class="check-element animate-hide" ng-show="checked">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
By having checked defined as your checkbox's model you can just that to control whether the select (drop down) is disabled using that variable on your controller's scope.
<select ng-model="myDropDown" ng-disabled="!checked">
make sure you use the negation of checked since you want it to be disabled when the checkbox is not checked.
PLNKR example
You can do:
<select ng-model="myDropDown" ng-disabled="!checked">
Use ng-disabled conditionally on if the ng-model for your checkbox is true or false
So, this is a real quick example. Below I have a select box. You can use ng-disabled="EXPRESSION" to dynamically disable stuff.
<select ng-model="dropdown" ng-options="item.name for item in dropdown" ng-disabled="!checked">
<input type="checkbox" ng-model="checked">
Just set the expression to check the variable that is true/false on your checkbox. When it is false (unchecked) your dropdown will be disabled