I am working on a an angular2 project and i setted the value of html element (input) value to 0 as follows
<div class="form-group">
<label for="balance">Balance</label>
<input ngModel type="number" class="form-control" id="balance" placeholder="Balance" name="balance" value="0" required>
</div>
but when i run the project i get empty input.
any help?
<div class="form-group">
<label for="balance">Balance</label>
<input type="number" class="form-control" id="balance" placeholder="Balance" name="balance" [(ngModel)]="balance" required>
</div>
In your component constructor
balance:number;
constructor(){
this.balance = 0;
}
Related
I've got a simple form which I'm wanting people to join to be put onto a waiting list for my product - but it's not submitting.
My application is being hosted on localhost:3000 and runs absolutely fine. The page renders and you can fill the inputs in.
But when you click 'submit' it does nothing. I've tried doing a few different 'types' of the button, but no luck.
Here's my code:
<section class="waiting-list-section">
<div class="waiting-container">
<div class="waiting-heading">
<h2>Join our waiting list</h2>
</div>
<div class="waiting-inputs">
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</div>
</div>
</section>
Any tips? :-)
You need a form element wrapped around the input elements and the button.
<form>
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</form>
Second approach would be to add an eventListener on the button and when it is clicked, get the values from the inputs and then do whatever you want to do with that data
Validation is not working properly. Its always shows This field is required. Even if I don't touch this field. Why?
<div class="form-group">
<label class="control-label col-sm-4">Description<span class="required"> * </span></label>
<div class="col-sm-8">
<input type="text" name="name" data-required="1" class="form-control" aria-required="true" aria-invalid="true" aria-describedby="name-error">
<span id="name-error" class="help-block help-block-error">This field is required.</span>
</div>
</div>
You could try adding the name="name" to the label.
Also add for="name" to the label.
Label's "for" attribute is bound to HTML element by element_id.
Remove the class="required" on the label and add required attribute to the input field if is needed.
<label for="element_id">
<input type="text" id="element_id" required>
<div class="help-block with-errors"></div>
is there any way in angular 2 to pick name/id of input inside divs?
html:
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input type="text" name="firstName"/>
<input type="text" name="firstName"/>
</fieldset>
</div>
component:
function(str){this.var=str}
Not sure if template variables of child elements can be accessed
<div class="form-pages" (click)='function(input1.value, input2.value)'>//if it's possible then what should I put into function param?
<fieldset>
<input #input1 type="text" name="firstName"/>
<input #input2 type="text" name="firstName"/>
</fieldset>
</div>
If this doesn't work you can use
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input #myinput type="text" name="firstName"/>
<input #myinput type="text" name="firstName"/>
</fieldset>
</div>
#ViewChildren('input') inputs:QueryList<ElementRef>;
myFunction() {
let inputs = this.inputs.toArray();
console.log(inputs[0].value;
console.log(inputs[1].value;
}
Ok, I did it alone, thanks for previous answer, but for me it works well, It's needed to call $event.target.name method which will return name of clicked target.
<div (click)="setFocus($event.target.name)">
<input type='text' name='input1 />
<input type='text' name='input2 />
</div>
in componentsetFocus(str){this.var = str)
How do i get the value of an html input element in my component class?
For example, i want to get the username from this input element in my component class.
<div class="row">
<div class="input-field col s12">
<input id="username" type="text" class="validate" name="username">
<label for="username">Username</label>
</div>
</div>
Then i need the value in my component class:
export class HomepageComponent {
username = username;
}
You could use ngModel directive there (two way binding) or template variable which will help you to hold DOM.
<input id="username" type="text" class="validate" [(ngModel)]="userName" name="username">
OR
<input #usernameInput type="text" class="validate"
name="username" (input)="username = usernameInput.value">
How to go about calculating the sum of two fields on change?
My HTML
<div class="field">
<label for="field1">F1:</label>
<input type="number" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div>
<div class="field">
<label for="field2">Field2:</label>
<input type="number" name="field2" disabled>
</div>
And i got this but unsure on how this works/how to get it to work..
<script> $(".input").on("change", function(){
var ret = Number($(".field1").val()) + Number($(".field2").val());
$("#field3").val(ret);
Is there an easier way to do this?
Your way is fine, But I prefer using on input event handler, as it's faster in updating the total number.
Also if you like to expand the sum process to handle many textbox(s) you can do the following
$(document).ready(function(){
$(".parameter").on("input",function() {
var total=0;
$(".parameter").each(function(){
if(!isNaN(parseInt($(this).val())))
{
total+=parseInt($(this).val());
}
});
$(".total").val(total);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="field">
<label for="field1">F1:</label>
<input type="number" class="parameter" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div>
<div class="field">
<label for="field2">F2:</label>
<input type="number" class="parameter" name="field2" min="0" placeholder="0" Title="Only positive numbers" required>
</div>
<div class="field">
<label for="field2">F3:</label>
<input type="number" class="parameter" name="field3" min="0" placeholder="0" Title="Only positive numbers" required>
</div>
<div class="field">
<label for="field2">Total:</label>
<input type="number" class="total" name="total" min="0" placeholder="0" Title="Only positive numbers" required>
</div>
By using this way you can include as many as number fields in the sum, and all what you need to do is to add class="parameter" to this new number field.
You can set the same class to the two inputs and then on the class change you can get the values of those inputs by their ids (which you can also set), and simply add them.
Something like:
<input id="input1" class="myclass"/>
<input id="input2" class="myclass"/>
And then on the javascript side:
$(".myclass").on("change", function(){
var value1 = document.getElementById('input1').value;
var value2 = document.getElementById('input2').value;
var sum = parseInt(value1) + parseInt(value2);
});
Any change in input will trigger the .on()'s callback function. Inside get the value of field1and field2 and parse it into int as they will be a string. Add them both and insert into field3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="field1">F1:</label>
<input type="number" id="field1" min="0" placeholder="0" Title="Only positive numbers" required/>
</div>
<div class="field">
<label for="field2">Field2:</label>
<input type="number" id="field2"/>
</div>
<input type="number" disabled id="field3"></input>
<script>
$("input").on("change", function() {
var ret = parseInt($("#field1").val()) + parseInt($("#field2").val() || '0')
$("#field3").val(ret);
})
</script>
Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
link:-How get total sum from input box values using Javascript?
or
link:-http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml
Convert String to Number using + operator so +"0" === 0 and +"1" + +"2" === 3
$(".input").on("keyup change click", function() {
var ret = +$("[name=field1]").val() + +$("[name=field2]").val();
$("[name=field3]").val(ret);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="field1">Field1:</label>
<input class='input' type="number" name="field1" value='0' min="0" placeholder="0" Title="Only positive numbers" required>
</div>
<div class="field">
<label for="field2">Field2:</label>
<input class='input' type="number" name="field2" value='0' min="0" placeholder="0">
</div>
<div class="field">
<label for="field3">Result:</label>
<input type="number" name="field3" disabled>
</div>