how can i validate the ngModel value. i want to check the value is type number or not. if it has fraction numbers then i have to round up the value to the nearest whole number.so is there any way to include validation in html and where i can add Math.round().
<div style="display: flex; margin-top: -3px; color: black;" class="dist" *ngIf="travel">
<label><span>Distance</span> <input type="number" value="0" [(ngModel)]="travel.distance" />km</label>
</div>
Solution
<label><span>Distance</span> <input type="number" value="0" [(ngModel)]="travel.distance" (change)="call()" />km</label>
call(){
travel.distance = Math.round(travel.distance);
}
Ps: Have updated my solution now i am getting the result which i am expecting. please check. is this the best way to do this or any other solution?
you can use addEventListener for get value of input with js and if use angular, you can use (keydown.enter) and like this events for get value
Related
I'm using ng-pattern :
<input type="text" ng-model="price" name="price_field" ng-pattern-restrict="/^[4]*$/" required only-digits>
Please let me know what to do that it does not accept any other numbers except 4. I am using directive for digits that is only-digits.
EDIT: SORRY WRONG ANGULAR VERSION - but if you can transform this to angularjs it will be work!
You can use (input) event in you HTML input element
<input type="number" (input)="check($event)">
Than in your ts you cehck value of input
check(event) {
console.log(event);
if (+event.data !== 4) {
event.target.value = '';
}
}
The pattern which you are mentioned is not a valid regex pattern. Instead of that try to use this /^([4]){1}?$/ Hope you will get it.
<input type="text" ng-model="price" name="price_field" ng-pattern-restrict="/^([4]){1}?$/" required only-digits>
Try to use below restrict pattern :
<input type="text" ng-model="price" name="price_field" ng-pattern-restrict="^[4]{1}?$" required only-digits>
And below validation message :
<div ng-messages="myForm.price_field.$error">
<span ng-message="pattern">Not a valid number!</span>
</div>
I have come across this and found many solutions but none fits my issue.
<input type="date" #evtDate required name="evtDate" placeholder="Select Event Date" id="evtDate" formControlName="eventDate">
It's displayed on the browser as:
I want to show a string placeholder here, something like:
I achieved this using CSS like,
input[type="date"]::before {
content: attr(placeholder);
width: 100%;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before { display: none }
This part has an issue here when I click on its date icon, the date input is again changed to normal format, like:
If I don't use this CSS part, it still shows the custom placeholder value but doesn't update anything on the input.
// input[type="date"]:focus::before,
// input[type="date"]:valid::before { display: none }
I also checked that there's some dynamic HTML created for this input type="data", and that needs to be kept for data to set in that format.
Can anyone please suggest how this can be done? Thanks in advance!
You can try these code
<input type="text" placeholder="Date" onfocus="(this.type='date')"/>
onfocus="(this.type='date')" onblur="(this.type='text')"
HTML<------>
<div>
<label for="date">Date : </label>
<input placeholder="Your Date" type="text" onfocus="(this.type='date')" onblur="(this.type= this.value ? 'date' : 'text')">
</div>
<input id="isChecked" name="isChecked"
type="checkbox"></input><input name="_isChecked"
type="hidden" value="on"></input> <label for="isChecked">Checked</label>
I have this checkbox on the top of my *.html.
I want to use the value of "isChecked" input in a "form" like seting 1/0 (true/false) to a hidden input:
<form id="someForm" class="form xml-display form-inline"
th:action="#{/doSomething}" method="post">
.....
<input type="hidden" name="isChecked"
th:value="GET VALUE FROM THE GLOBAL CHECKBOX" />
.....
</form>
So can I do this without any JS?
Should I add an object in my java controller to the Model so I can set the value from the "isChecked" checkbox to it and then use the object in th:value="${objectFromJavaController}" for the hidden input ? I tried setting a th:object="${objectFromJavaController}" for the checkbox and then passing it to the hidden input but it didn't work (th:value = ${"objectFromJavaController"}) ?
So can someone help me ? Thanks in advance!
Surely somethin like this is simple enough?
<input id="newsletter" name="newsletter" type="checkbox" checked="yes" value="yes"/>
This brings back the same result. anything else would be no. (with PHP code telling them apart)
I am trying to pass an input name to ng-show.
When the input's name is not an array, this works just fine (if it's just 'entity' instead of 'entity[entity_name]'), but when there's an array it's not working.
something about this syntax - 'ng-show = "investForm.entity[entity_name].$error.pattern"' is wrong:
<form name="investForm">
<label>Entity Name</label>
<input name="entity[entity_name]" rc-forms ng-pattern="/^[A-Za-z]+$/" type="text" ng-model="invest.entity_name" ng-required="invest.is_entity" />
<div ng-show="investForm.entity[entity_name].$dirty && investForm.entity[entity_name].$invalid">
<span ng-show="investForm.entity[entity_name].$error.pattern">Error: Please use English characters only!</span>
</div>
</form>
I found this question pretty intriguing, so I've been Googling for a while.
Apperently your problem is a JavaScript syntax error and I found it here:
angularjs form can not refer to input control when input name is array
You can use square-brackets. You have to reference your form element like this:
investForm['entity[entity_name]'].$error.pattern
I don't think you can use square brackets for the form name. Try replacing it with an underscore or something:
<form name="investForm">
<label>Entity Name</label>
<input name="entity_entity_name" rc-forms ng-pattern="/^[A-Za-z]+$/" type="text" ng-model="invest.entity_name" ng-required="invest.is_entity" />
<div ng-show="investForm.entity_entity_name.$dirty && investForm.entity_entity_name.$invalid">
<span ng-show="investForm.entity_entity_name.$error.pattern">Error: Please use English characters only!</span>
</div>
</form>
I am trying to change the add a class "isChecked" to the parent div whenever a checkbox is checked. For that I am trying to use ngClass directive.
HTML
<div ng-class="{isChecked: (isChecked_1 == 'true')}">
<input type="checkbox" id="check_1" ng-model="isChecked_1" />
<label class="label_1" for="check_1">This is a label</label>
</div>
CSS
.isChecked{
background-color: #428bca;
color: white;
}
But this isn't working. Can someone point out my mistake or suggest some better method.
When the user checks a checkbox angularJS sets the model to the boolean value true. In your code you compare this to the string 'true' which evaluates to false. Thus, you have to compare it to the boolean true. This is different from if statements where the string 'true' evaluates to true.
Moreover you don't need the manual comparision at all, as it's only purpose is to yield a boolean value. You can change your code to:
<div ng-class="{isChecked: isChecked_1}">
<input type="checkbox" id="check_1" ng-model="isChecked_1"/>
<label class="label_1" for="check_1">This is a label</label>
</div>
Solved it.
By changing the 'true' to just true , it worked.
So the new code is:
<div ng-class="{isChecked: (isChecked_1 == true)}">
<input type="checkbox" id="check_1" ng-model="isChecked_1" />
<label class="label_1" for="check_1">This is a label</label>
</div>
Anyone has idea what us is the difference between variable == 'true' and variable == true ?
You can use jquery for it. it has methods to add and remove css classes depending upon certain conditions