validate input with name containing brackets in AngularJS - angularjs

I have a form input with names containing brackets, e.g.:
<form name="my_form">
<input type="text" name="my_form[email]" ng-model="email" ng-class="'mycssclass': my_form.my_form[email].$invalid">
</form>
So, the problem is that Angular is not applying that css class because of the name of my input (my_form[email]), is that the correct notation to reference my input in Angular.
Here's is a plunk:
http://plnkr.co/edit/t7PEilV9maNYGnVYnTDc?p=preview


The way to reference an input with a name containing brackets is using brackets notation, like this:
my_form['my_form[email]'].$invalid


You need to use the ng-model attribute in your input. It bind the content of a field with a value in the $scope. You also need to pass a Javascript Object to the ng-class directive. In your example it would be :
<form name="my_form">
<input type="text" ng-model="my_form.email" ng-class="{'mycssclass': my_form.email.$invalid}">
</form>
Don't hesitate to look at the examples in the ng-model and ng-class directive documentation.

Related

How to get validation info of an input outside of a form?

We can get the validation info if the input is in a form: $scope.myForm.myField.$invalid etc..
What if input is outside of a form? How can we access the info?
I guess that field data (properties of the form object) is not same thing with ngModel. I tried something like this but didn't worked: (the model only contains string value of the input)
<input ng-model="myFakeForm.myField">
How can I achieve this?

Use the ng-form directive:
<div ng-form="set1">
<input name="field1" ng-model="myFakeForm.myField" ng-required="true" />
</div>
The input's ngModelController will be bound to $scope.set1.field1:
console.log($scope.set1.field1.$valid);
console.log($scope.set1.field1.$viewValue);
//... etc
For more information, see
AngularJS ng-form Directive API Reference

Append text in textarea in AngularJS with Laravel

I an new to AngularJS.
Below is my try to append text value in textarea with Laravel.
<textarea class="form-control" name="eticket" ng-model="{{ $var[0]['info'] }}"></textarea>
But it is generate error like this.
Thanks in advance.

There is a syntax error in your expression .You dont need to pass curly braces in ng-model . ng-model is angular js directive and you can directly pass value like :
<textarea class="form-control" name="eticket" ng-model="$var[0]['info']">

how to use Angular ng-change on input to change json data

I have an array like this:
var data = [{
"chamberName": "Community App",
"representativeEmail": "some#email.com",
"primaryColor": "#325490",
}]
And an input on a form like this:
<input type="text" class="form-control" id="chamberName" ng-change="" placeholder="Chamber Name">
I'd like to use ng-change to change the array value that matches the changing input value. I can't figure out how to get the input value though. I am thinking something like:
ng-change="data[0].chamberName = inputValue";
Any help would be great!
SIDE NOTE: You need to use $parent when using ng-include.

You need to use ngModel.
Why your original data in array?
If you need to edit only one instance it is simpler to use object and pass object's property to ngModel
<input .. data-ng-model="data.chamberName" .. />
Or if you are going to edit pool of objects, than you can surround it with ngRepeat
<fieldset data-ng-repeat="elm in data">
<input .. data-ng-model="elm.chamberName" .. />
..
</fieldset>
Or if you still want to store your single object in array
<input .. data-ng-model="data[0].chamberName" .. />

Validate one element inside an ng-repeat only when dirty

I have a form with simple ng-required validation. This works for simple input fields but I don't know what to do with an array inside an ng-repeat. I want the inputs inside the ng-repeat to become invalid only after they lose focus once.
Here is an example of the problem:
https://jsbin.com/kugobiwoxo/1/edit?html,js,output
This works: ng-required="myform.MyName.$touched"
This doesn't: ng-required="myform.contact[{{$index}}].$touched"
Is there some other expression I can use in the second case.

Angularjs does not honor indexed input names or ids. In ng-repeat you need to use ng-form attribute.
The changes I made to your div containing ng-repeat are as follows
<div ng-repeat='contact in model.Contacts' ng-form="innerform">
<label for='name'>Contact {{$index}}:</label>
<input type='text' ng-model='contact.Name'
id='name' name='contact'
ng-required="innerform.contact.$touched" />
<button ng-click='remove($event, $index)'>-</button>
</div>
and it is working as desired as you can see in this JSBin

Difference between ng-model and data-ng-model

I am new with the AngularJs. Can anyone say the difference between ng-model and data-ng-model?
With ng-model
First Name : <input type="text" ng-model="fname" id="fname">
Second Name : <input type="text" ng-model="lname" id="lname">
With data-ng-model
First Name : <input type="text" data-ng-model="fname" id="fname">
Second Name : <input type="text" data-ng-model="lname" id="lname">

while both ng-model and data-ng-model would work, HTML5 expects any custom attribute to be prefixed by data-.
<!-- not HTML5 valid -->
<input type="text" ng-model="name">
<!-- HTML5 valid -->
<input type="text" data-ng-model="name">

They are the same. Angular strips the data- part from the attribute. From the docs:
Angular normalizes an element's tag and attribute name to determine which elements match which directives... The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.

There is no difference between ng-model and data-ng-model if you see in terms of AngularJs.
Actually, 'data' used as prefix to validate HTML5 validation. So, it is good practice to use data-ng-model, however, you can use ng-model as well. There is no problem in that also.
Both have the same meaning and both have the same output:
With ng-model
First Name : <input type="text" ng-model="fname" id="fname">
Second Name : <input type="text" ng-model="lname" id="lname">
With data-ng-model
First Name : <input type="text" data-ng-model="fname" id="fname">
Second Name : <input type="text" data-ng-model="lname" id="lname">

Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them.

sylewester's answer is correct and can be read in the AngularJS Directive Documentation found at https://docs.angularjs.org/guide/directive
(this helped me understand sylwester's answer, so i figured it might help others too.)

sylewester's answer is correct and can be read in the AngularJS Directive Documentation found at https://docs.angularjs.org/guide/directive. Below is an excerpt from that page.
AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
For example, the following forms are all equivalent and match the ngBind directive:
(this helped me understand sylwester's answer, so i figured it might help others too.)

Resources