I have a form that generates some fields using ng-repeat. I want to attach each independent field to set validity in case it is left empty. Is there a way to do this?
Thanks!
You need to use ng-form with your ng-repeat. I'd update your example, but you didn't give me one... so the idea is something like this:
<form name="myForm">
<div ng-repeat="item in items" ng-form="repeatForm">
<input type="text" name="foo" ng-model="item.foo" required/>
<span ng-show="repeatForm.foo.$error.required">required</span>
</div>
</form>
If you needed to access 'setValidity' on the model for some reason, you'd probably have to pass repeatForm.foo to a function either on your controller or on your scope. like ng-click="myWeirdValidationFunction(repeatForm.foo)". There's probably not much of a use case for this though.
Related
Is there a way to avoid IDs while creating elements i.e. using ng-model it is easier to validate form fields and other stuff?
<div ng-repeat="x in TestData">
<input type="text" id="nameField-{{$index}}"/>
</div>
The above code will display the number of input boxes equal to the length of the TestData array where every text box will have a unique id "nameField-0", "nameField-1" and so on, using these IDs we can take the textbox values, validate the fields etc.
<div ng-repeat="x in TestData">
<input type="text" ng-model=""/> <!-- what shall be done here to have unique IDs -->
</div>
Although going with IDs is working fine for me but as far as I can understand If I use IDs then that will not be a pure angular way (or IDs cannot be replaced by mg-models), correct me If I am wrong.
You don't need to grab element with id/name/etc. You can use ng-model to bind your values and ng-pattern to validate them.
<div ng-repeat="x in testData">
<ng-form name="tForm">
<input type="text" name="tInput" ng-model="x.name" ng-pattern="/^[A-Z]*$/" />
<span ng-if="tForm.tInput.$error.pattern" style="color:red">Invalid!</span>
</ng-form>
</div>
See this jsbin.
In your controller add this,
$scope.nameField = [];
in ng-reapeat add this,
<div ng-repeat="x in TestData">
<input type="text" ng-model="nameField[$index]"/>
</div>
nameField will be an array with all your values.
<div ng-repeat="x in TestData" ng-init='this["nameField-"+x]'>
<input ng-model='this["nameField-"+x]'/>
</div>
You use ng-init to add new variables to the controller, "this" refer to your scope, and since the scope is an object, since this[bla] == this.bla tou are actually saying, add to my scope a variable name "nameField=" and you add the x value.
after you have created your variable, just use it in the same way in your ng-model.
If you want to show your variable's value in any div/span, just use it via ng-bind:
<div ng-bind='this["nameField-"+x]'></div>
You'd think this is already part of Angular but I can't find it. You can bind form fields to variables in $scope using ng-model. But we're constantly binding, like, 100 fields exactly like this:
<form>
<input name="foo" ng-model="object.foo" />
<input name="foo2" ng-model="object.foo2" />
<!-- and so on ... -->
</form>
Does Angular provide a way to bind a form and have each field bind to it's corresponding object property? Something like this?
<form ng-model="object>
<input name="foo" />
<input name="foo2" />
<!-- and so on ... -->
</form>
You'd think something like that should exist, right? It violates DRY to individually bind by hand. It's also inflexible if the model changes.
As fals stated your approach seems messy.
I assume that you may want to repeat a model and dynamically create a form.
Using ng-form you may dynamically repeat a model bind ng-model on your $scope.
The pretty awesome part is that you may even have validation!
<div class="form-group" ng-repeat="human in people">
<ng-form name="customform{{$index}}">
<input type="text" id="email{{$index}}" ng-model="human.email" id="email{{$index}}" required>
</ng-from>
</div>
Demo
I would like to iterate over an array in AngularJS like this:
var languages = ['en', 'es', 'fr'];
To generate something like this:
<input type="text" ng-model="mymodel.en" placeholder="Name (EN)">
<input type="text" ng-model="mymodel.es" placeholder="Name (ES)">
<input type="text" ng-model="mymodel.fr" placeholder="Name (FR)">
I have tried this:
<div ng-repeat="language in languages">
<input type="text" ng-model="mymodel.{{language}}" placeholder="Name ({{language | uppercase}})">
</div>
But throws an error:
"Syntax Error: Token '{' is an unexpected token at column ..."
How should I perform this loop?
Use mymodel[language] instead of mymodel.{{language}}
<div ng-repeat="language in languages">
<input type="text" ng-model="mymodel[language]" placeholder="Name ({{language | uppercase}})">
</div>
plnkr
See the plnkr, and start typing in any of the input fields to see the model changes.
you cantry something like this,
<input type="text" ng-model="mymodel[language]" ...
You shouldn't use {{}} notation inside ng-model here you can refer to your property in the mymodel object.
But it seems that you are trying to get binding via model somehow for your inputs. It's not gonna work in your case because you need to init mg-model directives.
For catching changed in your model from dynamically generated you need to compile used directives using $compile service.
Here you can check out sample. I googled it but I've solved similar problem in similar way.
My application has a lot of models in the page. I want to detect whether user has changed value of any model on click of save. Using $watch on every model puts too much load, so don't want to use this method. Is there any good approach for this?
Small snippet is like below:
<div>
<div class="ttere2">
<input type="radio" name="nc2-radio3" ng-model="nc2PenaltyAfter" value="specificDays" />
<input class="ggfe1" ng-model="nc2AfterDays" ng-disabled="nc2PenaltyAfter!='specificDays'" type="number" min="1" max="100" step="1" value="1" />days</div>
<div class="admin_wp-line">
<input type="radio" name="nc2-radio3" ng-model="nc2PenaltyAfter" value="immediately"/> Immediately </div>
<div class="acfv1">model 1</div>
</div>
<div style="margin-top: 20px;"><button ng-click="saveData();">Done</button></div>
............too many inputs go here
</div>
Use .$dirty! Angular will set this on every element that is bound using ng-model, automatically, when it has been changed. It will also set it on the entire form. You can access it in code like this:
if ($scope.myForm.$dirty) {
// Your code here
}
Angular will provide six useful variables on the form, and every ngModel-bound element in your form: $dirty and $pristine, $valid and $invalid, and $touched and $untouched. You can mix and match these to drive a lot of useful behaviors, and they're available both in your controller (using the expression shown above) and your template (directly).
I am generating a bunch of radio buttons using ng-repeat, and then trying to update a model when one of them is selected. This doesn't appear to be working.
The same markup works just fine when the radio inputs are hardcoded as opposed to being generated by ng-repeat.
This works:
<input type="radio" ng-model="lunch" value="chicken" name="lunch">
<input type="radio" ng-model="lunch" value="beef" name="lunch">
<input type="radio" ng-model="lunch" value="fish" name="lunch">
{{lunch}}
This doesn't:
<input type="radio" ng-model="lunch" ng-repeat="m in meat" value="m" name="lunch">
{{lunch}}
See jsfiddle showing both here: http://jsfiddle.net/mark_up/A2qCS/1/
Any help would be appreciated.
Thanks
<div ng-controller="DynamicCtrl">
<input type="radio" ng-model="$parent.lunch" ng-repeat="m in meat"
ng-value="m" name="lunch">
{{lunch}}
</div>
Should do the trick.
As I understand it, ng-repeat creates its own $scope. so you need to refer to the $parent $scope; Yes, AngularJS is tricky. Also you need to change the value to ng-value too.
the above issue was discussed here
That happens because ng-repeat creates a new scope. Basically, each <input> is creating a selectedOption value on its own inner scope. To work around that, create a new container object for that value. For example, you could declare in your controller:
$scope.data = {selectedOption: x};
And then in your template, use ng-model="data.selectedOption"
in this way, ng-model gets updated .. :)
this is tricky
Just need to replace value with ng-value