We Keep Coding

why get function call multiple times in angular?

I make a simple demo user login screen .I am facing one issue that get property function call multiple times (4 times).
Step to reproduce
Enter 10 digit number or email example test#gmail.com
Click continue button it show password screen.
click on change email or mobile no and see the console log it call four (4) times
here is my code
is there my implementation is wrong ?
here is my code
https://stackblitz.com/edit/angular-p5knn6?file=src%2Fapp%2Flogin-component%2Flogin-component.component.html
get userenterValue() {
console.log('log==')
return this.userInfo.username;
}
set userenterValue(val) {
this.userInfo.username = val;
}

That is expected, since you are using ngModel with set , whenever there is a change input value there will be a console.log entry.
The value bound on the html has to be evaluated every time something "has changed" in the app so that if the value of the bound item has changed it will be reflected to the html
Instead you could use ngBlur to get the value when the focus is left.

Instead of binding it using getters and setters. How about you try binding with the property itself like:
<input type="text" name="email"
autocomplete="off"
placeholder="Enter the Email or Number"
[(ngModel)]="userInfo.username"
required
[disabled]="showPasswordField"
pattern="^(\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+)$|^(\d{10})$">

Valid form - display just 1 error always [angular]

I valid my form using patterns / required on all inputs like below:
<div class="crazy-error" ng-show="myFrom.email.$dirty && myFrom.email.$invalid">
<span ng-show="myFrom.email.$error.required">INVALID: Required</span>
<span ng-show="myFrom.email.$error.pattern">INVALID: Pattern</span>
</div>
This code works cool for me however I want to display just on error all the time so if i have 3 inputs:
name
email
color
And for example all 3 are filled incorrectly display error just from first invalid always.
It's obvious it can be done with something like code below for each error display div:
<div class="crazy-error" ng-show="myFrom.email.$dirty && myFrom.email.$invalid && (myForm.name.$valid || myForm.color.$valid)">
But this looks a bit messy and as soon as form grow up and will have for example 7 inputs logic become really too complicated.
Is there some nice way to always display just first error instead of all of them?

you could use ng-hide -https://docs.angularjs.org/api/ng/directive/ngHide and ng-if - https://docs.angularjs.org/api/ng/directive/ngIf directives to make the conditions simple.

How to disable an input field for certain user?

I have an input field that I want to make it readonly for the users, and only the admin can change it .
<input value="http://google.com" class="form-control" readonly></div>

if you want do this as other said, you must have a database gestion, anyway the code that you must have is like:
<input id ="label1" value="http://google.com" class="form-control" readonly></div>
<script type="text/javascript">
var isAdmin = "1" //this variable must be valorized with a flag or something that is supposed to be, for example 0 for users 1 for admins
if(isAdmin==1){
var checkVisible = document.getElementById("label1");
checkVisible.readOnly= false;
}
</script>
for sure it's not a professional solution but this can give to you and idea how it works

2 simple ways to do this.
1st you can incorporate javascript inside in your jsp. Then create function that would hide your the field that can be editted if the user is not admin.(Then show only the read-only or text field) Then show it otherwise which seemed a little complicated this way.
But anyway, 2nd is you can use jsp standard tag library or jstl.. use . It works like a switch with case statements :) for reference please see: http://www.tutorialspoint.com/jsp/jstl_core_choose_tag.htm

Rails javascript; alert to fire when leaving a field

My ultimate goal is to add some validation to a set of date fields. However, my javascript sucks, so I'm starting small.
I am starting out by trying to get an alert message when a user leaves a field.
(For simplicity I'm just doing it all in my view...) Heres what I go to work...
# html.erb-template
<div class="from_date">
From Date
<input type="text" id="from_date" name="from_date"></input>
</div>
<script>
$("#from_date").blur( function() {
alert("boom!");
});
</script>

Your code seems to be fine - problem is that class and id are named the same, but you want to watch the input field not the surrounding div.
I just made a fiddle from your script and changed
the listener to be attached to the input field's id - and it's working.
the alert into a console.log
see
$("#from_date").blur(function() {.....
// instead of
$(".from_date").blur(function() {.....

Show Input Box on Check

You can see in the paper form attached what I need to convert into a web form. I want it to show the check boxes and disable the input fields unless the user checks the box next to it. I've seen ways of doing this with one or two elements, but I want to do it with about 20-30 check/input pairs, and don't want to repeat the same code that many times. I'm just not experienced enough to figure this out on my own. Anyone know anywhere that explains how to do this? Thanks!
P.S. Eventually this data is all going to be sent through an email with PHP.

I don't think this is a good idea at all.
Think of the users. First they have to click to enter a value. So they always need to change their hand from mouse to keyboard. This is not very usable.
Why not just give the text-fields? When sending with email you could just leave out the empty values.

in your HTML :
//this will be the structure of each checkbox and input element.
<input type="checkbox" value="Public Relations" name="skills" /><input type="text" class="hidden"/> Public Relations <br/>
in your CSS:
.hidden{
display:none;
}
.shown{
display:block;
}
in your jQuery:
$('input[type=checkbox]').on('click', function () {
// our variable is defined as, "this.checked" - our value to test, first param "shown" returns if true, second param "hidden" returns if false
var inputDisplay = this.checked ? 'shown' : 'hidden';
//from here, we just need to find our next input in the DOM.
// it will always be the next element based on our HTML structure
//change the 'display' by using our inputDisplay variable as defined above
$(this).next('input').attr('class', inputDisplay );
});
Have fun.

Since your stated goal is to reduce typing repetitive code, the real answer to this thread is to get an IDE and the zen-coding plug in:
http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
http://vimeo.com/7405114