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.
Related
<td level="{{taskCtrl.level}}" check-permissions="noCommercial" ng-if="tEl.id_subtype==1 || tEl.id_subtype==2 || tEl.id_subtype==9 || tEl.id_subtype==10">
<select id="vpo_{{$index}}" name="vpo_{{$index}}" class="form-control np fs-small"
ng-options="item.id as item.es for item in mainCtrl.vpo"
ng-model="tEl.vpo"
ng-required="true"
ng-change="taskCtrl.toggleVpo(tEl);">
<option value="">N.A.</option>
</select>
</td>
The default state for the td above is ng-valid despite no option from the selector list being chosen. As a result, ng-required is not disabling the submit button.
However, when you choose an option and then click back to N.A. (the placeholder option) the element becomes .ng-invalid and the submit form is disabled as desired. It works!
I am aware that this has something to do with ng-repeat and have made various attempts to resolve the problem by wrapping the table row in a form as suggested by various posts here.
I have a grid and need to implement a conditional editor template: if certain condition of the row is true, show a select dropdown, if not, show the regular text input. My template is this:
<div><form name="inputForm">
<select ng-show="row.entity.name == 'some_name'" ui-grid-edit-dropdown
ng-model="MODEL_COL_FIELD">
<option value="true">true</option>
<option value="false">false</option>
</select>
<input ng-show="row.entity.name != 'some_name'" ng-class="'colt' + col.uid"
type="text" ui-grid-editor ng-model="MODEL_COL_FIELD">
</form></div>
But it's not working ok...the dropdown show ok, but the text inputs don't appear when double clicking the field.
However...if I remove the ui-grid-edit-dropdown attribute of the select element, every control show ok, but now the select edit control doesn't disappear when I click somewhere else, as this is supposed to work.
Any ideas?
I have seen few answers which were working for ng-repeat, but with ng-options I am facing issue.
Problem : Want to show the error message required if the dropdown is touched and nothing is selected, I am able to do this with input fields.
JS CODE
$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Referred this ng-repeat solution
As there is no answer yet, I am posting the issue i found out.
So when i use ng-options it starts adding one extra row in the dropdown which can be blank or you can give something like select me.
I added the below code to fix that and in chrome it does not show any blank row.
<option value="" selected hidden/> </select>
But when i try in IE it still have a blank row, So what happens is when I select one value in dropdown and then click back on the blank row the ngMessage works fine.So if i add one more blank option in chrome and then try to select something first and then click on blank the ngMessage work as expected.
Issue is
I was expecting <select> to work like the input fields and was trying to use the$touched` state. But it does not work like that, I was thinking as soon as i click on the dropdown ngMessage should get active if i leave the focus to other field without selecting anything from dropdown. Not sure if I can make it possible through any other way.
Updated HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="">Select one </option> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
I have a dropdown and a radio button beside it. When an item is selected in the dropdown
and a user clicks on the radio button, I will like the dropdown to reset itself and have
"Select Number" as the default value.
How can i acheive that?
<div class="selection">
<label for="accountNumber" class="lbl">#T("Customer Account:")</label>
<select id="accountNumber" class="sel" name="accountNumber" ng-model="vm.defaultValue"
ng-options="item for item in vm.retrieveAliasName">
<option value="">Select Account</option>
</select>
</div>
<div id="acctsAll" class="all">
<input type="radio" id="AllAccounts" /><span class="lbl">("All")</span>
</div>
First of all you have to assign your input of type radio a model via ng-model directive. Then you have to check wether this model value matches the "All" value and clear default value of your vm.defaultValue.
Moreover if I get it right you need to clear and disable the select input when "All" radio is selected, but you might need an other radio which allows user to choose an option from select input. Based on that I've created this fiddle to help you out.
Notice the following parts:
<input ng-change="vm.clearDefaultValue()" ng-model="vm.areAllSelected" type="radio" id="AllAccounts" ng-value="true" />
and controller function:
this.clearDefaultValue = function() {
this.defaultValue = null;
}
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>