I have an input field where I want conditionally apply CSS class.
For example if firstName == undefined apply CSS class ng-dirty. So, I tried
<input required [(ngModel)]="customer.firstName" name="firstName"
type="text" minlength="2" maxlength="50" ng-class="{ng-dirty : customer.firstName === undefined}">
that however doesn't work.
If you are using Angular 2/ Angular 4 the below is the conditional syntax for NgClass
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
and if You are using angularJs(i.e. angular 1.x) use below
<some-element ng-class="{'fist' : true, 'second': true}">...</some-element>
Official Docs for Angular4 [NgClass]
Official DOcs for AngularJS ng-class
hope this helps :)
You could try this:
<input required [(ngModel)]="customer.firstName" name="firstName"
type="text" minlength="2" maxlength="50" [class]="(customer.firstName == undefined) ? 'dirty' : ''" >
But I don't think customer.firstName will ever be undefined, since you defined it when you put it in the model.
Js object notation can't have - dashes all you need is a quote to make it happen
<input required [(ngModel)]="customer.firstName" name="firstName"
type="text" minlength="2" maxlength="50" ng-class="{'ng-dirty' : customer.firstName === undefined}">
Related
This is my first time using bootstrap and angularJS and I have created a login form . If my username does not have the correct length I display an error under the input . However I also want to change the input border color to red if I have an error displayed and I do not know how to do it . If I can do this for a single input I can use it everywhere
My code for a username input :
<form name= "logForm">
<div class="form-group">
<label for="username">Username:</label>
<input type="username" class="form-control" id="uname" placeholder="Enter username" name="uname"
ng-minlength= "10" ng-maxlength = "15" ng-model = "uname" required/>
<span style= "color: #4CAF50" ng-show = "logForm.uname.$valid">Valid</span>
<span style= "color:red" ng-show= "logForm.uname.$touched && logForm.uname.$error.minlength">
Min length is 10
</span>
<span style= "color:red" ng-show= "logForm.uname.$touched && logForm.uname.$error.maxlength">
Max length is 15
</span>
</div>
</form>
So I need to find a way that whenever the error shows up my input border is red and when I have valid input the border must be green .
This can be done using ng-class or ng-style:
solution using ng-style:
<input type="username"
class="form-control"
ng-style="!(!(uname.length < 10) && !(uname.length > 15)) && {"border" : "1px solid red"} "
id="uname"
placeholder="Enter username"
name="uname"
ng-minlength="10"
ng-maxlength="15"
ng-model="uname"
required
/>
You can add class to element using ng-class. More information about this directive is available under documentation: https://docs.angularjs.org/api/ng/directive/ngClass
In your case you want to add some class to form when error is visible. All you have to do is add something like ng-class="{ 'is-invalid': logForm.uname.$touched && logForm.uname.$error.minlength }" into your input. (Please note that class is-invalid is official bootstrap input error class, but can be vary in different versions: https://getbootstrap.com/docs/4.0/components/forms)
<input type="username"
ng-class="{ 'is-invalid': logForm.uname.$touched && logForm.uname.$error.minlength }"
class="form-control"
id="uname"
placeholder="Enter username"
name="uname"
ng-minlength="10"
ng-maxlength="15"
ng-model="uname"
required
/>
If you just want to add some style instead of class, you can use ng-style directive:
https://docs.angularjs.org/api/ng/directive/ngStyle
How I can set a checked attribute for an input in my form, using Thymeleaf?
Here is my code, which currently doesn't work:
<label th:each="cat : ${categories}">
<input type="checkbox" value=""
th:value="${cat.id}"
th:text="${cat.description}"
th:checked="${recipe.getCategories().contains(cat) ? true : false}"
/>
</label>
As stated in comments, the problem may be from somewhere else but try this and see if it helps:
th:checked="${recipe.getCategories().contains(cat)}"
I am trying to style an element only when that element has a value attribute.
The value attribute is variable (it's a date), but it's the only thing that changes between "no value" and "has value" which I need to style differently.
Is it possible to use a wildcard in the CSS selector ascertain whether the value attribute is present? E.g:
HTML
<input class="thing" value="variable-something">...</input>
<input class="thing">...</input>
CSS
.thing[value="*"] {
...
}
OR
.thing[value=*] {
...
}
I've tried this solution but use of the " makes it look for a specific string. Doing .thing[value=*] is invalid and won't compile.
Any advice?
<input type="text" value="">
<input type="text">
input[value]{
background: #ccc;
}
Try it yourself https://jsfiddle.net/55rjf0y8/
You can use below code
input[value]{background: red;}
<input type="text">
<input type="text" value="">
I have set the limit of characters on textbox but while typing the input if it exceeds from 9 character it continues type it another field without use of tab
<input data-val="true" data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid">
I want it should stop to take input.
You should use jQuery for example
<input data-val="true" maxlength=9 data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid"><br>
<script lang="text/javascript">
$("#Ssn").keyup(function(e)
{
var str=$("#Ssn").val();
if(str.length==9)
{
$("#Ssn").blur();
}
});
</script>
at this code you must include jQuery before
** Edit Misunderstanding
Use the maxlength attribute
<input data-val="true" data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid" maxlength="9">
pattern attribute regular expressions aren't fully supported in all browsers--specifically, those that do support them don't always obey complex regular expressions. I've noticed this in Safari, at least.
The maxlength attribute SHOULD work. Not sure why it's not for you. Maybe post a JSBIN example for us to look at.
That said, for complex client-side form validation, you still need to rely on javascript to support a broader range of browsers.
I'm using handlebars in a backbone.js rails app, and I have a Boolean field I'm populating with a checkbox.
When I load the edit page, the form is populated with the contents from the server JSON something like
{id:3,user:'test',checkbox:1}
now in my handlebar form, I want to show that the checkbox is 1.
< input type="checkbox" name="checkbox" value="1" {{#if checkbox}} {{bindAttr checkbox checked="isSelected"}}{{/if}} >
but this isn't returning the checked checkbox. I'd really like to just be able to say if checkbox==1, but I don't see how I can do that with handlebars.
Anysuggestions??
What you would usually do, is using a Boolean in the 'model'.
{
isChecked: true
}
and then
<input type="checkbox" {{bindAttr checked="isChecked"}}>
If the Boolean is true, it will render the checked property, and if the Boolean is false, it would omit the property. So if isChecked is true, then Handlebars would output
<input type="checkbox" checked>
and if isChecked were false, we would get
<input type="checkbox">
Which is what we want!
I also wrote a helper to do this. It doesn't use backbone.js, so may be an alternative for some:
Handlebars.registerHelper('checked', function(currentValue) {
return currentValue == '1' ? ' checked="checked"' : '';
});
Usage example:
<input type="checkbox" name="cbxExample" id="cbxExample" {{checked cbxExample}}/>
Would tick a checkbox if the supplied JSON was:
{"cbxExample" : "1"}
Resulting in:
<input type="checkbox" name="cbxExample" id="cbxExample" checked="checked" />
[my first post - hope that's helpful!]