Role of value="" in <input ng-mode ..> - javascript

Silly question, but can someone explain what is the use of value="" in the following context:
<input ng-model="something.name" value="" class="input-xlarge" />
What other options asides leaving value blank do I have. I thought it was related to input type = "text" or "password"

What BKM said about value. Use the model. But you can do better than only blanking the value. See this example from the AngularJS.org home page:
<input type="text" ng-model="yourName" placeholder="Enter a name here">
The cool thing about this is, when the value is blank, there is a useful message telling the user what information to provide.

In AngularJS value attribute for the input type not really matters anything. What all matters here is the ng-model. ng-model in AngularJS is similar to value in normal php forms. Its not really related to input type, even in AngularJS forms you have to specify the input type for the attribute like input type="text" or input type="email" or something.
value is not so important in AngularJS forms.

Related

Adding Default Value To Text Input Angular 2

Background
I have a form with an input field containing the user's email address. I am using interpolation to add the email to the placeholder field.
Problem
I do not want the user to be able to change the email address in this field. I only want them to be able to see it. But I do want it to post with the form.
Question
I keep trying different ways and no matter what the form does not post the email. How can I bind it so that it will actually post the email address when the form is submitted?
Examples
I tried with readonly. That way they would not be able to change it.
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}" readonly>
I tried without readonly just to see if it would work if I do not add any restriction flags.
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}">
I know the email is accessible because I am adding it to the placeholder field and it shows up in the form. It just wont post.
The default value will be the value assigned to personal.email.
Alternatively you can bind to a different property
[(ngModel)]="personalEmail"
and assign a default value to personalEmail and on submit update persona.email in code or use
[ngModel]="personalEmail" (ngModelChange)="personal.email = $event"
to get the initial value from personalEmail and update personal.email when changes happen
This might also work (not tried)
[ngModel]="personal.email || 'defaultValue'" (ngModelChange)="personal.email = $event"
to only get 'defaultValue' assigned if personal.email is null
Here model is personal.email and the default value is auth.user.email
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email = auth.user.email" name="email" #email="ngModel">

AngularJS form validatation of auto-generated form

I am trying to validate an auto-generated form (via AngularJS v1.3) which inputs' names are in format:
form_name[field_name]
The very basic example would be:
<form name="morgageCalculator">
<input type="text" class="form-control"
name="morgageCalculator[homeValue]" value="0"
data-ng-model="data.homeValue" required="required"/>
</form>
As you can see, the input name is morgageCalculator[homeValue]. Now I would like to add an error message below it:
<div class="error"
data-ng-show="!morgageCalculator.morgageCalculator[homeValue].$pristine && morgageCalculator.morgageCalculator[homeValue].$invalid">
Please enter a number
</div>
For very obvious syntax reasons this expression is not valid:
morgageCalculator.morgageCalculator[homeValue].$pristine
But this one also does not work:
morgageCalculator["morgageCalculator[homeValue]"].$pristine
So, the question, is there any sane way of accessing those fields? I wouldn't mind moving the validation to some controller function, but I was faced with same issue of inability to access field object.
Any help/hint would be greatly appreciated.
With help of #dfsq from comment section, I was able to find the error. Unlike my SO question, my code was missing data-ng-model.
Validation will not fire at all if input was not bound to model....
The correct snippet:
<form name="morgageCalculator">
<input type="text" class="form-control"
name="morgageCalculator[homeValue]" value="0"
data-ng-model="data.homeValue" required="required"/>
<div class="error"
data-ng-show="!morgageCalculator['morgageCalculator[homeValue]'].$pristine && morgageCalculator['morgageCalculator[homeValue]'].$invalid">
Please enter a number
</div>
</form>

How to get back input value onblur with Angularjs?

I'm new with Angular and wanted to know how can I handle the following issue :
<input class="form-control" type="text" value="{{add_item.value}}" onfocus="this.value=''" onblur="this.value={{add_item.value}}">
of course this doesn't work.
I would like to get back the first value onblur if the input is empty.
Any advice ?
The short: You need to store the original value somewhere to retrieve when you need it.
Even shorter: Use https://github.com/betsol/angular-input-modified
For those who are interested in , I made an ugly thing but it works. I'm storing the original value in placeholder and using it onblur like this :
<input class="form-control" type="text" placeholder ="{{add_item.value}}" onfocus="this.value=''" onblur="if(this.value=='')this.value=this.placeholder"

Getting input value with javascript when it's not part of the form?

I am dealing with two versions of a page. The first one has a search input field as part of a form, and I can get that value no problem with
document.getElementsByClassName('search-input')[0].value
i.e. this will update as it's being typed. On the other version of the page (which I have no control over) the input field is not part of a form, and now the above code doesn't work (the class of the input field is still "search input").
Here is the html where it's working fine:
<form action="search-landing.aspx" method="GET">
<input class="search-input" autofocus="autofocus" placeholder="City, State or Zip" name="location" required="">
<button id="searchButton" tabindex="0" class="search-btn" type="submit">Search</button>
</form>
And here is the code where it's not
<div class="search-box">
<input type="text" class="search-input" placeholder="City, State or Zip">
</div>
Does anyone know why I'm having this issue? Is there a way around it (i.e. to grab a value from an input field that is NOT part of a form)?
Thanks
Rooster correctly pointed out that I may have more than 1 input field of class "search-input". There were two identical fields, one hidden so document.getElementsByClassName('search-input')[1].value was the answer in this case

input type="string" is it correct input type?

Currently I am having problem in firefox browser if I use: its automatically displaying the value the password and email when saving the password in firefox.
<input type="text" value= email/>
<input type="text" value= mobilenumber/>
I solved the problem by using it as:
<input type="string" value= email/>
<input type="string" value= mobilenumber/>
Now I need a source which can tell like there is an input type= "string".
So please can anyone help me finding the link to source.
There is no input type called string. In the comments to your question there are some URLs that show proof. Usually, at least with my experience, inputs with undefined types are usually text boxes.

Categories