I want the text box to be red color bordered when there is no value inside the text box <input type="tel" #phone="ngModel" [class.is-invalid]="phone.invalid" class="form-control" name="phone" [(ngModel)]="userModel.phone">
What you need here is use "ngClass]="{'is-invalid': !phone.valid}" and required attribute for input tag.
<input type="tel" #phone="ngModel" [ngClass]="{'is-invalid': !phone.valid}" class="form-control" required name="phone" [(ngModel)]="userModel.phone">
Here is Demo on stackblitz
Use [ngClass]="{'is-invalid' : phone.invalid}"
AS:
<input type="tel" #phone="ngModel" [ngClass]="{'is-invalid' : phone.invalid}" class="form-control" name="phone" [(ngModel)]="userModel.phone">
More about ngClass
Your dash gets interpolated! Quotes are needed.
Something like this.
[ngClass]="{'is-invalid': someBooleanValue}"
use !phone.valid instead of phone.invalid like this:
[ngClass]="{'is-invalid': !phone.valid}"
Related
I am the very beginner for html and js.
I have a js which can set the value of id="tk___kiaVlink" by using the following.
this.form.formElements.get('tk___kiaVlink').update('abcedf ghi');
But both label and link values are updated. How could I specify js code to update only [link] value?
<div class="fabrikSubElementContainer" id="tk___kiaVlink">
<input type="text" name="tk___kiaVlink[label]" size="200" maxlength="200" class="form-control fabrikinput inputbox fabrikSubElement" placeholder="Label" value="Video">
<input type="text" name="tk___kiaVlink[link]" size="200" maxlength="200" class="form-control fabrikinput inputbox fabrikSubElement" placeholder="URL" value="test value">
I tried using the name tk___kiaVlink[label] and it doesn't work.
const [label, link] = [...document.querySelectorAll('#tk___kiaVlink input')];
[label.value, link.value] = ['my label value', 'my link value'];
Hi guys i want to dynamically add a group of input fields when a button is pressed. This works with 1 group, but not with more than one. Here is my HTML:
<form action="address.php" method="POST">
<div id="list">
<input type="text" name="address" placeholder="Address">
<input type="text" name="suburb" placeholder="Suburb">
<input type="text" name="state" placeholder="State">
<input type="text" name="country" placeholder="Country">
<button id="addMore">Add Address</button>
</div>
</form>
I'm calling the addMore function with this javascript:
$(function(){
$("#addMore").click(function(e){
e.preventDefault();
$("#list").append("<input type="text" name="address" placeholder="Address"><input type="text" name="suburb" placeholder="Suburb"><input type="text" name="state" placeholder="State"><input type="text" name="country" placeholder="Country"><button id="addMore2">Add Address</button></div>");
});
});
I've added a button at the end with an id of addMore2 because i wanna generate a similar set of input controls but with different names. I want to call that id with this function:
$(function(){
$("#addMore2").click(function(e){
e.preventDefault();
$("#list").append("<input type="text" name="address2" placeholder="Address"><input type="text" name="suburb2" placeholder="Suburb"><input type="text" name="state2" placeholder="State"><input type="text" name="country2" placeholder="Country"><button id="addMore3">Add Address</button></div>");
});
});
... and then another set of controls with the function addMore3. Same as above, but with the number 3.
If i use each function alone, it works. But if i try to use all 3 together, it doesn't work. How can i dynamically reproduce a set of input controls with different names?
you could do something like this
$(var count = 0;
$("#addMore2").click(function(e){
e.preventDefault();
$("#list").append("<input type='text' name='address2'"+count+" placeholder="Address"><input type="text" name='suburb2'"+count+" placeholder="Suburb"><input type="text" name='state2'"+count+" placeholder="State"><input type="text" name='country2'"+count+" placeholder="Country"><button id='addMore3'"+count+">Add Address</button></div>");
count++;
});
});
#rayzor
You need to append your code before button
Please use below code:
jQuery("#addMore").click(function(e){
jQuery('<br><input type="text" name="address" placeholder="Address"><input type="text" name="suburb" placeholder="Suburb"><input type="text" name="state" placeholder="State"><input type="text" name="country" placeholder="Country">').insertAfter("input:last");
return false;
});
And remove code for $("#addMore2").click event
There's no need to add Addmore 2,3,etc manually. the js will add it automatically, as much as your want. Feel free to see this one: https://phppot.com/jquery/jquery-ajax-inline-crud-with-php/
I have an HTML code, with 3 input fields :
<div class="field" >
<input placeholder="Firstname" class="firstname" id="firstname_field" name="firstname" size="30" value="" type="text" >
</div>
<div class="field" >
<input placeholder="Lastname" class="lastname" id="lastname_field" name="lastname" size="30" value="" type="text" >
</div>
<div class="field" >
<input placeholder="Email" class="email" id="email_field" name="email" size="30" value="" type="text" >
</div>
Currently, because they are surrounded by div's, they display in block : http://jsfiddle.net/k2Nqp/159/
I need the 2 first fields to display "inline" and not as block, and the 3rd one to stay as a block.
Easy if you put "display:inline-block" inside the div's. But the tricky part here, is that I don't have any control on this HTML code, as it's auto-generated by a shortcode. I can add CSS, using the already existing classes, or even javascript (I used javascript to insert the placeholder)
And since the 3 divs have the same class, they would display all block or all inline, so I can only work on the input fields. Unfortunately I tried specified "inline-block" to the input fields, and it's not working.
Any idea on how to make this work ?
Thank you !
Use below CSS, to achieve your expected result
.field{
display:inline;
}
#email_field{
display:block;
}
http://jsfiddle.net/Nagasai_Aytha/k2Nqp/164/
display:inline will allow all fields to be displayed in inline and display:block on third field , will make it block element and gets displayed in separate line
If you need to do this with a more complex set of fields i would suggest checking out the :nth-of-type() and :nth-child() css selectors.
.field {
display: inline-block;
}
.field:last-child {
display: block;
}
<div class="field" >
<input placeholder="Firstname" class="firstname" id="firstname_field" name="firstname" size="30" value="" type="text">
</div>
<div class="field" >
<input placeholder="Lastname" class="lastname" id="lastname_field" name="lastname" size="30" value="" type="text">
</div>
<div class="field" >
<input placeholder="Email" class="email" id="email_field" name="email" size="30" value="" type="text">
</div>
May be you can use nth-child() selector to align your div's
div:nth-child(1),div:nth-child(2) {
display:inline;
}
Fiddle link
Read about nth-child
The below CSS rule will select all of the elements with the field class except for the last one and apply the display style with value inline-block.
.field:not(:last-child) {
display:inline-block;
}
I am trying to show JavaScript output value in form input.Bellow my div which output the value.
<div id="geo" class="geolocation_data"></div>
But I want to show in input box. I tried bellow code but not showing any
<input type="text" placeholder="Please type a location" class="form-control input-lg noredius geolocation_data" value="" id="geo">
<input type="text" placeholder="Please type a location" class="form-control input-lg noredius geolocation_data" value="" id="geo">
You should use the below Javascript code to populate the textbox with some value:
document.getElementById("geo").value= Your_variable_containing_the_value;
How can i remove the property of required to the Second Element "Second Name" ?
Here is my Code :
<form action="#" novalidate>
First Name:
<input type="text" name="first" required>
Second Name :
<input type="text" name="second" required>
<input type="submit">
</form>
You can set required property to false
$("input[name=class]").prop("required", false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Name: <input type="text" name="name" required>
Class: <input type="text" name="class" required>
<input type="submit">
</form>
Using jQuery you can do:
$('input[name=second]').prop('required', false);
Example
Try using .removeAttr().
$('input[name="class"]').removeAttr('required')
Try this:
$('input[type="text"][name="second"]').prop('required', false);
it just removes the required property on the target element which has the name "second".
you can use the
removeAttribute command:
First set ID's for the inputs.
I set it to the same value as the name.
Next removeAttribute
document.getElementById("class").removeAttribute("required");
This should do the trick ;)
Here, have a fiddle:
Fiddle