I am trying to create an input where you can write a number with decimals.
I don't know how to make it so that a user cant insert two points characters.
Example
I want to prevent the user from writing 0.123445.5, only with one point: 0.123445
I have tried with ionic input properties like step="0.01" but I can't solve it.
EDIT: (SOLVED)
Instead using number, use type="string" and create a method to check number of points of the number.
Before:
<ion-item">
<ion-label stacked>CRP</ion-label>
<ion-input type="number" step="0.01" [(ngModel)]="CRP" (ngModelChange)="checkRules();"
onkeypress="return event.charCode >= 46 && event.charCode <= 57"> </ion-input>
</ion-item>
Now:
<ion-item">
<ion-label stacked>CRP</ion-label>
<ion-input type="text" [(ngModel)]="CRP" (ngModelChange)="checkCRPkDecimals();"
onkeypress="return event.charCode >= 46 && event.charCode <= 57"> </ion-input>
</ion-item>
checkCRPkDecimals() {
if (isNaN(parseFloat(this.CRP))) return;
let str:Array<string> = this.CRP.split(".");
if (str.length > 2) {
this.CRP = "";
return;
} else {
this.checkRules();
}
}
Related
I'm trying to make ion-range with input. First, when I using ion-range it getting the right value(this.selectedNominal) but when I'm trying using ion-input to change the value it doesn't changing. It still using first ion-range value.
HTML
<ion-list-header>
Nominals
</ion-list-header>
<ion-item *ngFor="let b of listNom2">
<ion-range min="{{b.min}}" max="{{b.max}}" step="{{b.step}}" [(ngModel)]="nominal2" (ngModelChange)="optionsNominal(nominal2)" color="secondary">
<ion-label range-left style="font-weight: bolder;">{{ b.min | number:0 }}</ion-label>
<ion-label range-right style="font-weight: bolder;">{{ b.max | number:0 }}</ion-label>
</ion-range>
</ion-item>
<div style="text-align: center;margin-left:25%;margin-right:25%;padding-bottom:10px;">
<ion-input maxlength="8" type="tel" [pattern]="[0-9]" (ionChange)="setValue2(nominal2)" style="border:1px solid #FF9900;border-radius:5px;" [(ngModel)]="nominal2" (ionChange)="optionsNominal(nominal2)">Rp.{{ nominal | number:0 }}</ion-input>
</div>
TS
setValue2(nominal2) {
if(nominal2 == null || nominal2 == undefined || nominal2 == '') {
this.nominal2 = 0
} else {
this.nominal2 = parseInt(nominal2);
}
if (this.nominal2 > 50000000) {
this.nominal2 = 50000000;
} else if (this.nominal2 < 3000000) {
this.nominal2 = 3000000;
}
}
optionsNominal(value: any) {
if (value == NaN || value == null || value == undefined || value == '') {
this.selectedNominal = 0;
} else {
this.selectedNominal = value;
}
}
I cannot use requiredattribute as the ion-input (email) field is conditionally required. Also I do not want to check everytime the form is submitted to fire invalid email unless and until the email (ion-input) has some text input and it is not a valid email.
This is what I've done so far:
<ion-item >
<ion-label stacked>{{'email' | translate}}</ion-label>
<ion-input type="email" [ngClass]="{ 'is-invalid':(AddContactForm.submitted && email.invalid && addContactData.phone_type=='Email') || (AddContactForm.submitted && email.length && email.invalid)}" email name="email" [required]="addContactData.phone_type=='Email'" [(ngModel)]="addContactData.email" value="" class="nui-text-field__input"
#email="ngModel"></ion-input>
</ion-item>
<span class="nui-text-field__sub-label error" *ngIf="(AddContactForm.submitted && email.invalid && addContactData.phone_type=='Email') || (AddContactForm.submitted && email.length && email.invalid)">{{'email_required_validation' | translate}}</span>
I would set up a model and check that.
<ion-input [(ngModel)]="this.thing"></ion-input>
Then check if this.thing is valid :)
I need help.. How can I show more words if something is longer than 20 characters?
<ion-list no-padding no-border no-margin>
<ion-item *ngFor="let item of items | async | reverse">
<ion-card no-padding no-border>
<img [src]="item.url" />
<ion-row>
<ion-item ion-start class="font">{{item.descrizione}}</ion-item>
</ion-row>
</ion-item>
</ion-list>
Now if {{item.descrizione}} is too long it simply doesn't show more. I thought that *ngIf {{item-descrizione.length}} > 20 could solve my problem but I don't know how to continue with show more/less text.
Thank you!
What about using pipes? This is something what I have done.
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'truncate'
})
export class TruncatePipe {
transform(value: string, args: string[]) : string {
let limit = args.length > 0 ? parseInt(args[0], 10) : 10;
let trail = args.length > 1 ? args[1] : '...';
return value.length > limit ? value.substring(0, limit) + trail : value;
}
}
and Component class and template goes something like this
export class TruncatedTextComponent {
limit: number = 40;
truncating = true;
}
<div *ngIf="text">
<div *ngIf="text.length <= limit">{{text}}</div>
<div *ngIf="truncating && text.length > limit">
{{text | truncate : limit}}
<button ion-button (click)="truncating = false">show more</button>
</div>
<div *ngIf="!truncating && text.length > limit">
{{text}}
<button ion-button (click)="truncating = true">show less</button>
</div>
</div>
ion-input type text should only accept alphabets without using the form Builder.
<ion-item class="myitem">
<ion-input type="text" value="" placeholder="Full Name*" [(ngModel)]="fullname" maxlength="25"></ion-input>
</ion-item >
You can do it with html adding the pattern attribute to your input.
Alphabets and blankspace:
pattern="/^[a-zA-Z\s]*$/"
Alphabets no blankspace:
pattern="/^[a-zA-Z]*$/"
Alternate
[pattern]="'^[a-zA-Z \-\']$'"
alternately you can use,
<ion-input class=" " (keypress)="onKeyPress($event)"> </ion-input>
and
onKeyPress(event) {
if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122) || event.keyCode == 32 || event.keyCode == 46) {
return true
}
else {
return false
}
}
it will work for me
I want to hide and show the textbox when the ion-select(combobox) is change
For example I have : 1 and 2 in ion-select
If i choose 1 the textbox will hide and if i choose 2 the textbox will appear
Here is my current code:
.ts
onChange(membership){
if (this.membership = '1'){
this.value = 1; }
else if (this.membership = '2'){
this.value = ""; }
}
HTML
<ion-list>
<ion-item>
<ion-label>Register as</ion-label>
<ion-select [(ngModel)]="membership" (ionChange)="onChange(membership)">
<ion-option value="1">member</ion-option>
<ion-option value="2">nonmember</ion-option>
</ion-select>
</ion-item>
</ion-list>
this is the textbox that i want to hide
<ion-item [hidden]="!value">
<ion-label floating>Email Address</ion-label>
<ion-input type="text" name="email" ></ion-input>
</ion-item>
When I'm opening the application the textbox is hiding and when i select from the combobox the textbox is showing but when I select the other item in the combobox its not hiding anymore.
It is just a simple error in onChange method. You are assigning the value with =, so it always returns true and set this.value to 1. You have to use double equals to verify equality :
onChange(membership){
if (this.membership == '1') {
this.value = 1;
} else if (this.membership == '2'){
this.value = 0;
}
}