How do I bind an ng-model that is an array to a fixed number of textboxes?
Let's say I have three textboxes and they are all optional, how do you bind the ng-model to those textboxes?
<input type="text" name="optionalField[]">
<input type="text" name="optionalField[]">
<input type="text" name="optionalField[]">
You can type into any textbox (e.g. textboxes 2 and 3 only) and when you save it, it's just going to be optionalField: ['text2', 'text3'].
Where you place the text doesn't matter; what matters is the order of the textboxes. So when you show the view again, it's just going to be bound to the first and second textboxes. If you only typed on the textbox 3, it will be bound to textbox 1 and so on.
UPDATE:
Just used dfsq's answer and modified it to return a filtered array of values.
http://codepen.io/anon/pen/ozpxGq?editors=1011
In ng-repeat you can use $index
<input type="text" name="optionalField[]" ng-model="optionalField[$index]">
Like this:
<input type="text" name="optionalField[]" ng-model="optionalField[0]">
<input type="text" name="optionalField[]" ng-model="optionalField[1]">
<input type="text" name="optionalField[]" ng-model="optionalField[2]">
Related
I have a decimal number input field on a modal form in which I want make sure the user inputs a value less than another base value in my application like below.
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />
But somehow the ng-max does not seem to trigger this validation and set the input box invalid. What could I be missing?
I would like to keep the type to be text so the up and down arrows are not displayed. And user can enter 4 or 5 digit numbers with decimal places.
Maybe the question should be what else can I use instead of ng-max that the value is validated against the base number.
Sample plunker
http://plnkr.co/edit/9SAgqkjOlqUEHXhcyaqB?p=preview
Try changing the input type to number instead of text.
The max and min attributes works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
<input name="mainInput" type="number" size="10" ng-model="data.baseNumber" ng-max="3" required/>
To see the style changes add CSS rule
.ng-invalid{
border: 1px solid red;
}
Plunnkr
Your program has one error also with that.
TypeError: Cannot read property '$valid' of undefined
match the name of the form, you did mismach as numberForm, modalForm
Aslo make the field as number as type
Should be
<input name="modalInput" type="number" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />
If you want to keep type="text" I think you can not use ng-max to validate text type. So you can create an event for the input ng-change="change()"
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required ng-change="change()" />
The change() function to check max value for you when user enter
$scope.change = function(value) {
if (value> maxValue){// Do something here}
};
Today I faced a situation with angularJS.
Hi have a recipe website, and to list the ingredients and theyr respective dosage I'm using angular's ng-repeat (here goes the snippet).
<div ng-repeat="food in foodList | filter:query">
<label>
{{food.name}}
</label>
<input type="text" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
</div>
The thing is that when I apply the filter, all inputs I previously inserted some value, if they are hidden because of the filter, they return to empty.
Is there anyway around this?
I think you probably want to bind the input to something using ng-model, for example:
<input type="text" ng-model="food.dosage" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
That will implement two-way binding from your model to the input tag, so that when ng-repeat re-runs, the previously entered values will be re-bound from the model.
I have a group of input boxes that are dynamically built and added to the page. I can control the ID that is placed on the elements but it is wrapped in with a bunch of garbage. For example, I give it an ID of clientTest it will render an id of j_id0:j_id2:theForm:clientTest_mod. There is a total of 7 input boxes that contain this Id but contain different endings. The first part of the ID is also dynamic so I can not hard code anything in.
An example,
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lkid" id="j_id0:j_id2:theForm:clientTest_lkid" value="000000000000000">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lkold" id="j_id0:j_id2:theForm:clientTest_lkold" value="null">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lktp" id="j_id0:j_id2:theForm:clientTest_lktp" value="001">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lspf" id="j_id0:j_id2:theForm:clientTest_lspf" value="0">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lspfsub" id="j_id0:j_id2:theForm:clientTest_lspfsub" value="0">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_mod" id="j_id0:j_id2:theForm:clientTest_mod" value="0">
How can I search through and find the input boxes that I want to target?
extending #Michael Chaney
// select the collection
var inputs = $("input[id*='theForm']");
// loop through each element.
$("input[id*='theForm']").each(function(ind, ele){
$("#textPlace").append("<li>"+ $(ele).attr("id")+"</li>");
});
http://jsfiddle.net/1zsj0zcc/1/
I have two forms. Second one is just the same the first one, only difference is the names and IDs input fields and select boxes. For example in the first one has an input field like this:
<input type="text" name="fname" id="fname" placeholder="First name">
...and the second one has an input filed like this:
<input type="text" name="fname2" id="fname2" placeholder="First name">
Nothing else.
In the first one form it's working fine, but it isn't working in the second one. Just show a little box without any text.
No error messages, nothing in the console log.
Any idea?
try by initializing both control separate by id like below
$("#chosen1").chosen();
$("#chosen2").chosen();
bcoz i think your second form chosen control is not initialized.
I have a form like this:
<form name="mine">
<input type=text name=one>
<input type=text name=two>
<input type=text name=three>
</form>
When user types a value in 'one', I sometimes want to skip the field 'two', depending on what he typed. For example, if user types '123' and uses Tab to move to next field, I want to skip it and go to field three.
I tried to use OnBlur and OnEnter, without success.
Try 1:
<form name="mine">
<input type=text name=one onBlur="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=two>
<input type=text name=three>
</form>
Try 2:
<form name="mine">
<input type=text name=one>
<input type=text name=two onEnter="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=three>
</form>
but none of these works. Looks like the browser doesn't allow you to mess with focus while the focus is changing.
BTW, all this tried with Firefox on Linux.
Try to attach tabindex attribute to your elements and then programmaticaly (in javaScript change it):
<INPUT tabindex="3" type="submit" name="mySubmit">
You could use the onfocus event on field two, which will be called when it receives focus. At that point, field 1's value should be updated and you can perform your check then.
If you used the method you describe, and they worked, the focus would also change when the user clicks on the field, instead of tabbing to it. I can guarantee you that this would result in a frustrated user. (Why exactly it doesn't work is beyond me.)
Instead, as said before, change the tabindex of the appropriate fields as soon as the content of field one changes.
<form name="mine">
<input type="text" name="one" onkeypress="if (mine.one.value == '123') mine.three.focus();" />
<input type="text" name="two">
<input type="text" name="three">
</form>
Try onkeypress instead of onblur. Also, on the onfocus of field two is where you should be sending to three. I'm assuming you don't want them typing in two if one is 123 so you can just check that on two's onfocus and send on to three.