I prefilled ion-input with a value but it is not displaying. I am new to ionic but I understand little of it concepts.
Here is what I tried.
.ts
async getSimData() {
try {
let simPermission = await this.sim.requestReadPermission();
if (simPermission == "OK") {
let simData = await this.sim.getSimInfo();
this.simInfo = simData;
this.cards = simData.cards;
}
} catch (error) {
console.log(error);
}
}
html
<ion-card *ngFor= "let card of cards" >
<ion-card-content>
<ion-list>
<ion-item>
<ion-input type="number" name="phone" value="{{ card.phoneNumber }}" #phone disabled="true"></ion-input>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
How can I make this appear in the ion-input?
you can also use with ngModel, i checked your code it is also working with value.
In below code both are working, check this : https://stackblitz.com/edit/ionic-eu7tcl
<ion-card *ngFor= "let card of cards" >
<ion-card-content>
<ion-list>
<ion-item>
<ion-input type="number" name="phone" [(ngModel)]="card.phoneNumber" #phone disabled="true"></ion-input>
<ion-input type="number" name="phone" value="{{ card.phoneNumber }}" #phone disabled="true"></ion-input>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
Related
I have the below form that is generate dynamically, I am trying to make a validation but is fail
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'model: sdaDAd'. Current value: 'model: '.
HTML
<div [formGroup]="someForm">
<ion-item-group *ngFor="let att of day; let idx = index">
<ion-item >
<ion-label color="primary">{{att.label}}{{idx+1}}. Day</ion-
label>
<ion-input formControlName="day" type="text" text-right
[(ngModel)]="day[idx].value"></ion-input>
</ion-item>
<ion-item >
<ion-label color="primary">{{att.label}}{{idx+1}}. Exc</ion-label>
<ion-input type="text" formControlName="exc" text-right
[(ngModel)]="exc[idx].value"></ion-input>
</ion-item>
<ion-item >
<ion-label color="primary">{{att.label}}{{idx+1}}.
Hint/Repeats</ion-label>
<ion-input type="text" formControlName="hint" text-right
[(ngModel)]="hint[idx].value"></ion-input>
</ion-item>
<span color=danger float-right ion-button icon-left clear
*ngIf="exc.length > 0"
(click)="removeInputField(idx)"><ion-icon name="close"></ion-icon>
Remove
</span>
</ion-item-group>
<ion-card *ngIf="data_exc">
<ion-item *ngFor="let att of exc; let i=index">
<div class="card-title">Exc: {{att.value}}</div>
<div class="card-title">Hint/Repeats: {{hint[i].value}}</div>
<div class="card-title">Day: {{day[i].value}}</div>
</ion-item>
<div class="card-title">Notes: {{workoutData.notes}}</div>
</ion-card>
<button ion-button (click)="Add()">+Add</button>
<button ion-button (click)="goTo()" >Preview</button> <br>
<ion-toolbar>
<ion-item>
<ion-textarea placeholder="Tap here to enter a new note"
[(ngModel)]="workoutData.notes" formControlName="notes"
autocomplete="on" autocorrect="on"></ion-textarea>
</ion-item>
</ion-toolbar>
<button [disabled]="!someForm.valid" ion-button full
(click)="presentConfirmCustomWorkout()" type="submit" >Submit</button>
</div>
Validation to check if the form is empty so I will not get empty values in array
this.someForm = formbuilder.group({
'day': [this.day.value, Validators.compose([Validators.required])],
'exc': [this.exc.value, Validators.compose([Validators.required])],
'hint': [this.hint.value, Validators.compose([Validators.required])],
'notes': ['', Validators.compose([Validators.required])],
});
I am trying to implement a validation for inputs in Ionic. For some reason the validation is not firing up. Please see my code below:
<form #loginForm="ngForm" novalidate>
<ion-card>
<ion-card-content>
<ion-item>
<ion-label floating>Email Address</ion-label>
<ion-input
[(ngModel)]="account.email"
type="email"
name="email"
#email="ngModel"
required
pattern="[A-Za-z0-9._%+-]{3,}#[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})"></ion-input>
</ion-item>
<div padding *ngIf="email.invalid && email.dirty">
<span>Email address is not valid.</span>
</div>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input
[(ngModel)]="account.password"
type="password"
name="password"
#password="ngModel"
required></ion-input>
</ion-item>
</ion-card-content>
<ion-row class="login-form__buttons">
<div>
<button ion-button (click)="navigateToRegisterPage()" color="secondary">Register</button>
<button ion-button (click)="login()" color="primary">Login</button>
</div>
</ion-row>
</ion-card>
</form>
The Email address is not valid. is not showing. I would really appreciate your help.
With the Ionic version 3.19.1, when you change something in the html of a component, the changes does not reflect. You have to change something at a .ts and save.
Im using ionic 3 for my mobile application, I have some issues with my input fields which do not move automatically to the next field. For example when I click the first input filed and fill the first one, the cursor does not move to the next field. How to do that correctly?
<ion-grid>
<ion-row>
<ion-col>
<ion-item >
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="2" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="3" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="4" ></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
You can use the following approach, there could be better approaches i'm just sharing what i know.
What i am doing here is setting a reference of the next element (eg: #b), and on keyup event i am passing that reference to my function in .ts file which only calls the .setFocus() on the referenced element.
<ion-grid>
<ion-row>
<ion-col>
<ion-item >
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" (keyup)="moveFocus(b)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="2" #b (keyup)="moveFocus(c)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="3" #c (keyup)="moveFocus(d)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="4" #d ></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
.ts:
import { Component } from '#angular/core';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor() {
}
moveFocus(nextElement) {
nextElement.focus();
}
}
You can try something with the (keyup) or (keydown) events. There is also documentation available on the angular docs that talks about forms and user Input.
HTML
<input (keyup)="onKey($event)">
.ts
onKey(event) {
if (event.key === "Enter") {
console.log(event);
}
}
This can be achieved by using the nextElementSibling , you can use the Keyup event to achieve this , here is the Pseudo code
Add keyup event to the event fields as follows (keyup)="keytab($event)"
keytab(event){
let element = event.srcElement.nextElementSibling; // get the sibling element
if(element == null) // check if its null
return;
else
element.focus(); // focus if not null
}
In order to make it more clear manner you can create a directive also as follows
tabindex.directive.ts:
import { Directive, HostListener, Input } from '#angular/core';
import { TextInput } from 'ionic-angular';
#Directive({
selector: '[yourTabindex]'
})
export class TabindexDirective {
constructor(private inputRef: TextInput) { }
#HostListener('keydown', ['$event']) onInputChange(e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
this.inputRef.focusNext();
}
}
}
Don't forget to include this directive in Modules page and you can use it on your input fields as follows ,as a sample:
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" yourTabindex ></ion-input>
Adding "scrollAssist: true" and "autoFocusAssist: true" to app.module in the #ngModule would solve this problem.
imports: [
IonicModule.forRoot(MyApp, {
scrollAssist: true,
autoFocusAssist: true
})
],
I am developing a SIgnup page in ionic 3 and the no of fields are 10.
SO I am using a p tag to show validation and when the user hits submit I want to take him all the way up to the start of the page which has my header and all.How can I achieve this?I have tried everything.
Below is my code:
<ion-content padding class="label-cl green-bg acct-sct item-row" style="position:fixed">
<h2 class="center-col">Create An Account</h2>
<form #f="ngForm" (ngSubmit)="signUp(f)">
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" name="name" ngModel required></ion-input>
</ion-item>
<p style="color:red;text-align: left" *ngIf="usernameError">Invalid Username</p>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email" name="email" ngModel required></ion-input>
</ion-item>
<p style="color:red;text-align: left" *ngIf="emailError">Invalid E-mail</p>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="Password" name="password" ngModel required></ion-input>
</ion-item>
<p style="color:red;text-align: left" *ngIf="passwordLengthError">Invalid Password</p>
<ion-item>
<ion-label floating>Confirm Password</ion-label>
<ion-input type="Password" name="confirm_password" ngModel required></ion-input>
</ion-item>
<div class="button-inline">
<button ion-button class="yellow-cl" [disabled]="!f.valid">Submit</button>
</div>
</form>
</ion-content>
It has more fields but I am showing only these just for the sake of clarity.
Thanks in advance.
Add the below code to your .ts file
import { Component, ViewChild } from '#angular/core';
import { Content } from 'ionic-angular';
#Component({...})
export class SignUpPage{
#ViewChild(Content) content: Content;
signUp() {
this.content.scrollToTop();
}
}
We used Angular's #ViewChild annotation to get a reference to the ionic content component which has the method scrollToTop().
Find more details in the Official docs
I have a form with product rate and quantity inputs. I need to calculate the value (rate * quantity) and assign the value to amount input field.
Please find the code snippet below:
<form [formGroup]="additemForm" (ngSubmit)="submit(additemForm.value)" >
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-label>Product :</ion-label>
<ion-select formControlName="product">
<ion-option *ngFor="let product of productArray" value="{{product.code}}" selected="false">{{product.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value"></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" type="submit" [disabled]="!additemForm.valid">Submit</button>
<button ion-button type="button" (click)='cancel()' >Cancel</button>
</ion-col>
</ion-row>
</form>
You need to use [(ngModel)] for this.
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty" [(ngModel)]="quantity"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate" [(ngModel)]="rateValue"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value" [(ngModel)]="rateValue * quantity"></ion-input>
</ion-item>
Now, still amount input field will be edible after this. And changing this value will affect the other 2 input values also. You can disable the input, so it will appear as a read-only input. This worked in my code.