Adding Default Value To Text Input Angular 2 - javascript

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">

Related

How to fetch values from multiple input fields in typescript?

I have a few Input fields, which are dynamically generated.
I want to fetch the text entered in the input field on a button click.
The console log of e.value is :
NodeList [input.criteria-box]
0: input.criteria-box
length: 1
What is want is to get the value of the input fields.
const criteria_elems = document.getElementsByName('criteria-field');
criteria_elems.forEach((e) => {
console.log(e.value); // Property 'value' does not exist on type 'HTMLElement'.ts(2339)
})
<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required /><br>
<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required /><br>
<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required /><br>
<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required /><br>
<input type="text" class="criteria-box" name="criteria-field" placeholder="Enter Criteria" required />
The input fields gets generated at first, then user can enter data to those fields and click on a button.
At this time the entered data in each of the fields are to be fetched using some loop logic or so.
Any ideas on how to fetch value inside the loop?
Ideally, you should be using reactive form group for such tasks. You can create a form array for dynamic input element and then you can easily fetch values from that form array.
Still, to resolve your issue temporally, modify your code like this:
criteria_elems.forEach((e: HTMLInputElement) => {
console.log(e.value);
})
To fix the compilation error, we need to assign the HTMLInputElement as the type of each of the element that we are iterating over.
You can use
document.querySelectorAll(".criteria-box");
that should return array of all elements matching class name .criteria-box
Otherwise, I'd suggest wrapping all fields into single form tag and process form data on submit event. That solution would be more bug-free and allow you to process data within a single form, not across the entire website.

Autofilling an input bound with ng-model

I have a very basic username/password field, and it's bound via ng-model to two properties on my controller. They are set up like this:
loginModel = {
username: '',
password: ''
};
They are bound to input elements like so:
input(autocomplete="off" data-original-title="The email you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The UserName field is required." name="UserName" placeholder="Email" required="required" type="email" value="" ng-model="signInVm.loginModel.username" ng-change="signInVm.checkForm()" am-autofocus)
input.inspectletIgnore(data-original-title="The password you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The Password field is required." name="Password" placeholder="Password" required="required" type="password" value="" ng-model="signInVm.loginModel.password" ng-change="signInVm.checkForm()")
I have a submit button that checks to see if the username and password field are filled out to determine if it is disabled or not via ng-disasbled
button.btn.btn-secondary.btn-signin(type="submit" ng-disabled="!signInVm.canSubmit" ng-click="signInVm.tryLogin()" ng-if="!signInVm.isLoggingIn") Sign In
The problem I am having is that, when the page loads and Chrome autofills the two fields, it still seems to think those two fields are empty and so the submit button is disabled despite the form seemingly being filled out properly. Once you do anything on the page, like click anywhere or hit something on the keyboard, the fields detect the autofilled data and then the submit button becomes active.
I think this is because the fields are defined as '' initially, because if I set the values to something else (e.g. hello#world.com) then the button will be active... but then the fields will be prepopulated with the hardcoded data in the controller intead of autofill. I can't think of any way around this. I want the fields to be empty by default, but if they are autofilled I want the code to recognize this immediately and make the submit button active without me having to interact with the browser first. Is there any way to do this? I feel like there must be an incredibly simple solution I am missing, but I really can't think of it despite my best efforts.
Hopefully my question makes sense. Thank you for your help!

to get <input> autofocussed so that a barcode scanner could input the productcode and my ajax function could handle it

I have the following code :
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" onChange="ajaxrequest_provideProductListOnHit('protected/snippet/snippet_provideProductListOnHit.php', 'ajaxOnProductHit'); return false;" required="required" autofocus />
The problem is that :
The autofocus is not working, I'm using it in this input box only.
Actually the purpose of this input box is to get the field autofocussed so that a barcode scanner could input the productCode.
Now as you can see, my onChange event handler is not going to work here since the barcode scanner apart from the product code, inputs too.
So I need a solution here which autofocuses and once the barcode scanner inputs value in the field, calls for the mentioned ajax function.
html:
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" required="required" autofocus />
js:
var pc = document.getElementById('productCode');
pc.onblur = function () {
ajaxrequest_provideProductListOnHit(
'protected/snippet/snippet_provideProductListOnHit.php',
'ajaxOnProductHit'
);
}
pc.focus();
i use onblur, because onchange would trigger after EVERY change you make (e.g. typing into the text-field will trigger after every key).
you could also provide some custom-logic, e.g. recognize a certain length
Yes you where right, the problem was that I was using autofocus on a different preceding form field which made this particular field of this particular form non-autofocus. So I learned that in a page with multiple forms loaded in to the DOM, only the first one with auto-focus will work. Fool of me to think otherwise.

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

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.

Assign the value to different field ID?

I have a form with a unique identifier field that the user needs to enter, when passing this value it needs to appear in different field id. so for instance. the field that user enters the unique code in is called "unique" and the copy needs to be in "message", how can i achieve that?
<div data-role="fieldcontain">
<label for="pins" id="pinLabel"><span style="color:#f22300">*</span> Unique Code:</label>
<input data-mini="true" name="pins_r" id="pins" placeholder="9 alphanumeric characters"/>
</div>
<input type="hidden" id="msg" name="msg" value=pins>
Thanks
There are two ways to do this with JavaScript.
Method 1)
Have an onchange event on the unique field such that whenever the value is changed, change it in a hidden field called message.
<input type="text" id="unique" name="unique" onchange="setMessage(this);">
<input type="hidden" id="message" name="message">
function setMessage(field) {
document.getElementById('message').value = field.value;
}
Method 2)
Use ajax to post the form instead, that way you can build the fields yourself.
ie. post message= document.getElementById('unique').value
Both the above are greatly improved if you use JQuery or another JS helper framework.
If you want your values to be set in the label at the same time, it is entered.
You can do some thing like this.
$(document).ready(function() {
$('#pins').keypress(function() {
setTextValueForPins(this);
});
});
function setTextValueForPins(textPin)
{
$('#pinLabel').text($('#textPin').val());
}
If you want the value to be set after the user have entered the value, you can use the change event.
PS: Not tested the code , let me know if you face any Issues.

Categories