Need advice about form validation.
I have control structure like so:
<form name="myForm">
<control-wrap>
<label isRequired="myForm.field1">Some text here</label>
<custom-control name="field1"
ng-required="true"
ng-something-else="any"
ng-model="modelForm.field1"></custom-control>
<info>Some data after control</info>
<error-list field="myForm.field1"></error-list>
</control-wrap>
<control-wrap>
<label isRequired="myForm.field2">Some text here</label>
<custom-control name="field2"
ng-required="true"
ng-something-else="any"
ng-model="modelForm.field2"></custom-control>
<info>Some data after control</info>
<error-list field="myForm.field2"></error-list>
</control-wrap>
<control-wrap>
<label isRequired="myForm.field3">Some text here</label>
<custom-control name="field3"
ng-required="true"
ng-something-else="any"
ng-model="modelForm.field3"></custom-control>
<info>Some data after control</info>
<error-list field="myForm.field3"></error-list>
</control-wrap>
</form>
And this is completely AWFUL, unDRY and I guess I'm doing something very wrong.
I want to stop using field names, but I don't know how to pass ngModel to the sibling the proper way (now I'm forced to pass ngModel via attributes to isRequired and error-list).
Best solution for me ofc is to require: '^ngModel' from isRequired and error-list.
Any advice will be very appreciated.
P.S. there is no way for me to store fields in json object, there is a lot of logic between fields and different tweaks on labels and hints.
Well, I came to this solution: https://plnkr.co/edit/mPXpEaZs2uWZb3WRkmgp?p=preview
Maybe it's not the best solution, but I don't need names anymore.
The main idea is to set model reference to parent container and watch this reference from other children.
So in the end I have:
<control-wrap>
<label link-required>Field1 label:</label>
<input link-to-wrap ng-model="mc.field1"
type="text"
ng-required="true"
ng-minlength="5"
ng-maxlength="10" />
<errors-list></errors-list>
</control-wrap>
UPDATE
Some more thoughts about storing validation rules with model:
https://plnkr.co/edit/6ZVv685oSRDt7ELBKb9z?p=preview
New directive my-rules and extended data in controller.js
Related
I am completely new to AngularJs. I need to make autocomplete=off for a password input.
Is autocomplete=off the only way or do we have to do it in some different way in AngularJs?
This doesn't nothing to do with AngularJS at all, but simply html.
Regarding to your statement, password fields shouldn't be autocompleting if they are set to type password, otherwise if you want to set a specific field inside a form to autocomplete off you can do it setting that property to false like this <input autocomplete="on|off">.
This can be defined at form level or at input level. In a form it would be like this:
<form action="" autocomplete="on|off">
</form>
Also you can define it in a form level, and override the behavior for some specific inputs like this:
<form action="" name="myform" autocomplete="on">
<input autocomplete="off" name="myInput" >
</form>
In the above code, in the form myform the autocomplete is on, it means all inputs (the one which allow it) will do autocomplete, but in the input myInput will not, since it overrides the form behavior.
More info can be found in The HTML autocomplete attribute
This should be sufficient:
<input type="password"
autocomplete="off"
placeholder="password"
ng-model="vc.password">
I added the autocomplete="off" just for redundancy but it seems completely unnecessary.
jsbin - https://jsbin.com/bowuxopese/edit?html,js,output
I'm trying to add objects to a Firebase database and to retrieve the name and value from two text boxes.
<label class="item item-input">
<span class="input-label">Beer Name</span>
<input type="text" id='nomeBirra'>
</label>
<label class="item item-input">
<span class="input-label">Review</span>
<textarea name="comment" placeholder="Enter review" id="Recensione"></textarea>
</label>
This retrieves the two text areas:
var nameBirra=document.getElementById("nomeBirra")
var valueBirra=document.getElementById("Recensione")
This is the piece of code that adds a new object to database
rootRef.child("databaseBirre").set({
name: nameBirra,
value: valueBirra
})
The problem is that it works, but the two parameters appear empty in the database. How can I retrieve the values inside the text boxes? Or am I doing something else wrong?
The firebase syntax is right, which is why it's appearing in the database - it's the other bit that is wrong. There are a few things that could be wrong but it's hard to say without seeing the context (e.g. are those getElementByIds wrapped in a function etc?) but the most obvious one is that you need to get the VALUE of the input box, not the box itself. So, first thing to try:
var nameBirra=document.getElementById("nomeBirra").value
etc
I am learning Angular.js and i've come to a problem that should probably be simple, but I can't seem to find an answer on.
I want to create form inputs with the value of "connectedTeams", like this in html:
<input type="text" name="connectedTeam[]">
<input type="text" name="connectedTeam[]">
<input type="text" name="connectedTeam[]">
I have tried the following in angular...
<input type="text" name="connectedTeams[]" class="form-control" ng-model="user.connectedTeams">
...but it is binding the same value to all 3 inputs. I know in my mind that this makes sense, but I can't seem to figure out how to tell it that ng-model is user.connectedTeams.[] (user > connectedTeams > add to an array.
I hope this makes sense enough for someone to provide a quick answer.
ng-model="user.connectedTeams[0]"
ng-model="user.connectedTeams[1]" and so on
You can put it in a ngRepeat, so you don't need to repeat your code like above.
FYI, name is only used for validation in Angularjs.
I'm giving an student scenario as example.
Assume I have the below scope variables that needs to populated when I select a id.
$scope.student.name;
$scope.student.address;
$scope.student.city;
$scope.student.zip;
The sample html below.
<input type="text" ng-model="student.id"/>
<input type="text" ng-model="student.name"/>
<input type="text" ng-model="student.city"/>
<input type="text" ng-model="student.address"/>
<input type="text" ng-model="student.zip">
In a regular jQuery, I would write on change and trigger. But how do I achieve this in angular way.
I might want to have the entire db values in a hashmap of <studentid,List<studentdetails>> and use this hashmap values to be populated on the respective fields.
I know this is probably a little late on the draw to answering this question, but I was searching for an answer to auto-population with Angular today and found that you could populate an input using ng-value and passing it into your value held inside of {{}}.
It would look something like this: ng-value="{{exampleValue}}
Hope this helps.
I have already solved this problem, but it took me a while to realize what I did wrong. It's a very simple mistake, but I figured I'd post it here in hopes I can save someone else some work in case they run across the same mistake.
I was trying to use simple Angular validation to set a class on an input field based on whether it was valid. I failed to realize it wasn't working because I specified the name of my form with ng-form. So using $scope.form or the actual value of name attribute of the form did not work. Of course, the examples below are simplified and a much larger form could make this mistake much harder to recognize.
Here is a failed example:
<form name="myForm" ng-form="form1">
<input type="text" name="myField" ng-class="error: myForm.myField.$invalid"/>
</form>
Here is a successful example:
<form name="myForm" ng-form="form1">
<input type="text" name="myField" ng-class="error: form1.myField.$invalid"/>
</form>