I have a page with an option to insert names.
Basically you click in the add button, a modal with an input and a char counter opens and you type what you want, click in the add button bellow the input and that name is added to the page. You can creat as many as you want.
The problem is: the char counter in the modal only updates when the input is focused. If your first name has let's say 5 letters, when you try to add a second name, the modal opens empty, but the char counter shows 75chars left instead of 80 until you click in the input, then goes back to 80 like it should.
Also, when you try to edit an existing name, the char counter shows 80 left even tho there's a name already in the input. Then again, when you click in the input, the counter updates to the correct value.
This is a sample from the code, even tho you can't see a preview, it has the code related to the problem:
https://embed.plnkr.co/rDbeal3nFmeitXQEkP55/
There's no need to listen for keyup and change events nor for the function updateCount, all you need to do is use ng-model, like this:
<div class="form-group" ng-class="{ 'has-error': revenue.name.$invalid }">
<label>{{ 'revenues.form.name.label'|trans }}</label>
<input name="name" type="text" class="form-control" ng-model="model.name" ng-required="true" maxlength="80" placeholder="{{ 'revenues.form.name.placeholder'|trans }}">
</div>
<span>You have {{80 - model.name.length}} characters left.</span>
Here is a working plnkr.
UPDATE:
If you want the span to change color based on the char count, just use ng-class:
<span ng-class="{'red-text': model.name.length >= 70, 'green-text': model.name.length == 10}">You have {{80 - model.name.length}} characters left.</span>
red-text and green-text are sample css classes:
.red-text{
color:red;
}
.green-text{
color:green;
}
Here's the updated plunk
Related
I'm trying to put a euro sign inside an input but despite everything, I can't get it to work.
It's a plugin that display a slider for a form, I tried to add a div to contain this input inside the plugin file, but it doesn't work either.
Here's what I tried, but I'm not sure if it can work this way with javascript
var input = $( "#input_1_30" );
input.val( input() + "€" );
<div class="ginput_container"><input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">
Thanks
As I said in my comment, I used HTML text input field with currency symbol
<label>€
<input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">
</label>
This isn't a job for JS. Place the € next to the form input in html and style it accordingly using CSS.
Edit
The benefit of using a label here is that clicking the contents of the label brings the input into focus, which other methods wouldn't do by default.
I am not entirely sure what you want to do but what you can do is add the euro sign as a placeholder in the input field but it will disappear after a user adds their earnings.
If you still want add it in the placeholder attribute, you can do this in the input tag
<input placeholder="€"/>
I hope this helped and if you want to know more about placeholders and input tags you can check INPUT Placeholder Attribute (MDN).
I want the following Angular code (using Angular 12) to show "Illegal award number" when the input is invalid.
As you can see in the screenshot, when the number is -1 (smaller than the min value defined on the input), the div is shown as expected.
However, if I input some text such as 1-, or an expression 3-4 and hover my mouse over it, the browser will tell me my input is not a valid number, but the div is not shown (which means awardInputRef.invalid is false).
Why is that?
Here is the relevant code
<label class="form-label" for="awardInput">Award</label>
<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
#awardInputRef="ngModel" />
<div *ngIf="awardInputRef.invalid">Illegal award number</div>
PS:
If I add (blur)="onAwardBlur($event)" to the award input and add a function in my component
onAwardBlur(event) {
console.log(event);
}
then debug the code by logevent.target.validity.valid, I will see it is false.
The code is available on stackblitz. The Angular version there is 11, and the div does not show up even if I input -1 there.
As part of Angular version 12 only min and max directive are implemented that's why stackblitz version is not working.
You can workaround your issue using native Input element ValidityState
Define another one template variable on input element
<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
#awardInputRef="ngModel" #inputRef />
Then you can add some custom validity something like this:
<div *ngIf="awardInputRef.invalid
|| inputRef.validity.badInput && (awardInputRef.dirty || awardInputRef.touched)
">Illegal award number</div>
Working Example
input: -1
Your Using [ - ] this special character so the filed goes awardInputRef.invalid.
so div shown.
input: 1-
Your using number first it goes awardInputRef.valid or something else but not awardInputRef.invalid .
so the div not shown in this case.
you just inspect the field and find the before after changes .
I am creating an angular2 form in typescript using ionic ,
.html
<form (ngSubmit)="verify(form)" #form="ngForm">
<ion-input type="text" name="data" #number="ngModel" maxlength='4" [(ngModel)]="digits"></ion-input>
<span *ngIf="number.dirty && form.submitted && form.value.number<4">Enter all numbers</span>
<span *ngIf="number.pristine && form.submitted">Enter number</span>
<button (click)="doAgain()">Click Again</button>
<button type="submit">Verify</button>
</form>
Problem1: When I click on Click Again button The error message is displayed as Enter number, which i dont want to display also it triggers verify() function.
Update:
Problem2: My requirement is that I only need numbers to enter in the text box and not the alphabets and special characters such as 'a', 'b' , '#'. So with the above implementation the input box is receiving a b c d and # # $ and 1 2 3 anything. I want to restrict it to number only. I know because I have provided the attribute as type="text" so it acts this way. As I have changed to type="number" I achieved the goal but the number of characters the input field is accepting is more that my maxlength which is 4.
You should be adding the type of the button
<button (click)="doAgain()" type='button'>Click Again</button>
As ngSubmit will be fired on click of any button inside the form group.
To differentiate between submit button and other buttons we use this type
Read here for more information on it
You can add type="tel" in input field,
<ion-input type="tel" name="data" #number="ngModel" maxlength="4" [(ngModel)]="digits"></ion-input>
I have input and text boxes which have different placeholders like "number of reps", "time needed in secs" etc.
<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>
I have built a click event so that whenever any box is clicked, its placeholder becomes blank so user inputs a value like so:
textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);
function checkInput(e){
e.currentTarget.placeholder="";
}
^^made a single function that can be used for both textarea and sets
How can I get the placeholder back if the user clicks a box but doesn't type in a value and moves on to another item (blur event) by using a single function for all the items like so:
textarea.addEventListener("blur",originalValue);
reps.addEventListener("blur",originalValue);
function originalValue(e){
e.currentTarget.placeholder= default value/original value;
}
Try out this textbox
<input type="text" placeholder="Enter a value">
As you can see there is no code whatsoever, and it does exactly what you want; if a user enters any text the placeholder is removed. If the user enters no text (or removes existing text) the placeholder is restored on blur.
I seriously don't understand why you even began to write code around this!
If you just want to confuse your users, take a copy of the placeholder into the element before clearing it and restore it on blur.
textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);
textarea.addEventListener("blur",restore);
sets.addEventListener("blur",restore);
function checkInput(e){
e.currentTarget.originalPlaceholder = e.currentTarget.placeholder
e.currentTarget.placeholder="";
}
function restore(e){
e.currentTarget.placeholder = e.currentTarget.originalPlaceholder;
}
<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>
I think this is a terrible idea FWIW!
I have the following plunker attached herewith
http://plnkr.co/edit/3H2q4eVJW5h0K3EdJIBe?p=preview
<html>
</html>
As per the plunker, i have 3 issues which i am not able to fix.
1) When user clicks on 'add row', 3 input fields show up. 2,3 and 1. i want the sequence to be 1,2 and then 3. 1 is the autocomplete input box which should be at the top. If i bring 1 to top, i dont see 2 and 3 then.
2) Ok and Close buttons dont close. Am i doing anything wrong in the function ? Pressing 'ok' should let me retrieve the selected value at input 1. Pressing 'cancel' should close the modal
3) If you see $scope.fetchList, it has a JSON value. I want the $scope.fetchList to be using an array instead. What changes needs to be done in order to get the following. Just an example of autocomplete list items below.
$scope.fetchList = ["ActionScript","AppleScript","Asp","BASIC","C"];
I forked your plunk here
Here's how I addressed your issues:
Issue 1
I just wrapped your elements in div's
<div>
<div>
<br> Select name:
<autocomplete placeholder="Enter sedol" style="width:29%" selection="selection" source="fetchList" />
</div>
<div>
<br> Given Data1:
<input type="text" readonly>
</div>
<div>
<br> Given Data2:
<input type="text" readonly>
</div>
</div>
Issue 2
You hade the save an cancel functions declared in the parent controller rather than the controller for the modal, so I moved it.
Issue 3
I don't understand the issue. fetchList() already returns an array albeit an array of objects rather than an array of strings. Changing it to an array of string breaks all sorts of code in your directive.