I want to disable buttons when fields are empty.
Template:
<ion-content padding text-center class="product">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price"></ion-input>
</ion-item>
<button ion-button block (click)="checkPrice()" [disabled]="!(product.price && product.productName) ? true : null">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!(product.price && product.productName) ? true : null">Добавить в чек</button>
When I run this on browser - data binding works fine.
when I run this on device - data binding does not work:
I think you can do this using <form> and required in <ion-input> like:
<ion-content padding text-center class="product">
<form #demoForm="ngForm">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName" required></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price" required></ion-input>
</ion-item>
</form>
<button ion-button block (click)="checkPrice()" [disabled]="!demoForm.form.valid">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!demoForm.form.valid">Добавить в чек</button>
Just an example. You need to check other parts/conditions in your code if you have any.
Related
I have an "ion-list" in an "ion-item" from a parent list in a view. But, the child list doesn't display any data. Here's the code i use to diplay the lists :
<ion-list>
<ion-list-header>
{{ 'forms.settings.areas' | translate }}
</ion-list-header>
<ion-item *ngFor="let area of areas">
<ion-list>
<ion-item class="item-thumbnail-left">
<ion-avatar>
<img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
</ion-avatar>
<h2>{{ area.translations.fr }}</h2>
</ion-item>
<ion-item>
<ion-label floating>{{ 'forms.settings.area.followDLC' | translate }}</ion-label>
<ion-toggle [(ngModel)]="area.followDLC" [checked]="area.id == 1" color="primary"></ion-toggle>
</ion-item>
<ion-item *ngIf="area.followDLC">
<ion-label floating>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
<ion-range min="0" max="7" step="1" snaps="true" color="primary" pin="true" [(ngModel)]="area.alertBefore">
<ion-label range-left>0</ion-label>
<ion-label range-right>7</ion-label>
</ion-range>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
The ion-list-header is correctly rendered, but the other items are blank.
The "areas" structure on which i loop is an array of objects and seems correct :
[{"id":1,"type":"area","translations":{"fr":"Frigo","en":"Fridge"},"stats":{"totalProducts":5,"totalQuantity":5,"stockPrice":null,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"frigo.png","_id":"1","_rev":"50-55c270db9c0ac62ae8e378e1773a390c","followDLC":true,"alertBefore":7},
{"id":2,"type":"area","translations":{"fr":"Congélateur","en":"Freezer"},"stats":{"totalProducts":5,"totalQuantity":1,"stockPrice":4.99,"alertOnPeremption":0,"alertOnStockLevel":1},"logo":"congelateur.png","_id":"2","_rev":"19-307ca9a1882e4c1781cad5b062cdd920","followDLC":false,"alertBefore":0},
{"id":3,"type":"area","translations":{"fr":"Garde-Manger","en":"Pantry"},"stats":{"totalProducts":11,"totalQuantity":5,"stockPrice":25.48,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"garde-manger.png","_id":"3","_rev":"118-2746786125e84ae31dd9bfaaecd73118","followDLC":false,"alertBefore":0}]
The screenshot of the result follows :
Someone can help ?
Okay...
Don't know why the first code doesn't render the way i want... But, i change the view this way :
<ion-item-group *ngFor="let area of areas">
<ion-item-divider color="light">
<ion-avatar>
<img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
</ion-avatar>
<h2>{{ area.translations.fr }}</h2>
</ion-item-divider>
<ion-item>
<ion-label item-left stacked>{{ 'forms.settings.area.followDLC' | translate }}</ion-label>
<ion-toggle item-right [(ngModel)]="area.followDLC" [checked]="area.followDLC" color="primary"></ion-toggle>
</ion-item>
<ion-item>
<ion-label item-left stacked>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
<ion-range item-right min="0" max="7" step="1" snaps="true" color="primary" pin="true" [(ngModel)]="area.alertBefore">
<ion-label range-left>0</ion-label>
<ion-label range-right>7</ion-label>
</ion-range>
</ion-item>
</ion-item-group>
Then, labels and input renders the way i want...
Thx all
I have this code for an <ion-toggle> in a modal page but when I go to the page it freezes Ionic and I need to shut it down to get it working again. When I leave the binding out, the <ion-toggle> is displayed correct. On the same page is a form that is using ngModel.
<ion-item>
<ion-label>public</ion-label>
<ion-toggle (ionChange)="togglePublic()" [(ngModel)]="newComment.public"></ion-toggle>
</ion-item>
Sombody an idea what the problem can be?
The full html .
<ion-content padding>
<ng-container *ngIf="timer">
<ng-container *ngIf="addingComment">
<ion-card-header text-center class="new-comment">
{{newComment.author}}
</ion-card-header>
<ion-card-content>
<form [formGroup]="commentGroup">
<ion-textarea placeholder="" clearInput formControlName="comment" [(ngModel)]="newComment.message"></ion-textarea>
<ion-item *ngIf="commentGroup.controls['comment'].hasError('minlength') && commentGroup.controls.comment.touched" class="invalid">
<p>The comment needs to be at least 4 characters</p>
</ion-item>
<ion-item *ngIf="commentGroup.controls['comment'].hasError('maxlength') && commentGroup.controls.comment.touched" class="invalid">
<p>The max lengt is 140 characters</p>
</ion-item>
<ion-item *ngIf="commentGroup.controls['comment'].hasError('required') && commentGroup.controls.comment.touched" class="invalid">
<p>A comment is required!</p>
</ion-item>
</form>
<ion-item>
<ion-label>public</ion-label>
<ion-toggle (ionChange)="togglePublic()" [(ngModel)]="newComment.public"></ion-toggle>
</ion-item>
<p class="text-center">{{sToTime(newComment.time)}}</p>
<ion-buttons end>
<button (tap)="cancelComment()" color="danger" ion-button small>cancel</button>
<button (tap)="postComment()" ion-button small>post</button>
</ion-buttons>
</ion-card-content>
</ng-container>
<ion-card *ngFor="let comment of commentsToDisplay" class="comment ">
<ng-container *ngIf="!comment.remove && !comment.addComment">
<ion-card-header class="text-center">
{{comment.author}}
</ion-card-header>
<ion-card-content>
<p>{{comment.message}}</p>
<p class="text-center">{{sToTime(comment.time)}}</p>
</ion-card-content>
</ng-container>
<ng-container *ngIf="comment.remove && !comment.addComment">
<div class="fadeout">
<ion-card-header class="text-center">
{{comment.author}}
</ion-card-header>
<ion-card-content>
<p>{{comment.message}}</p>
<p class="text-center">{{sToTime(comment.time)}}</p>
</ion-card-content>
</div>
</ng-container>
</ion-card>
</ng-container>
</ion-content>
And here is the TS constructor where the this.newComment.public to bind is defined in.
constructor(public viewCtrl: ViewController, public navParams: NavParams, public authService: AuthService, public commentData: CommentData) {
this.isSerie = navParams.get('isSerie');
this.media = navParams.get('media');
this.comments = [];
this.commentsToDisplay = [];
this.commentGroup = new FormGroup({ comment: new FormControl('', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(140)])) });
this.forwardingTimer = Observable.timer(0, 250);
this.newComment = {
message: '',
author: this.authService.currentUser.user_name,
time: this.originalTime,
public: true
}
}
I want to display label and input on left side sequentially and button/icon on right side.
i have tried with using grid as
<ion-grid>
<ion-row>
<ion-col width-10>
<ion-icon name="phone-portrait"></ion-icon>
</ion-col>
<ion-col width-70>
<ion-input type="text" placeholder="Mobile no"></ion-input>
</ion-col>
<ion-col width-10>
<ion-icon name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
It display's it inline but the input box slightly goes below.
also tried with item-left and item-right properties. but cant able to do.
Try this:
<ion-item>
<ion-icon item-left name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-right name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
You will probably have to override some of the css in the elements of ion-grid otherwise.
UPDATE From ionic#3.4.0 :
Thanks to #keldar for the comment. According to the docs,directional properties item-left and item--right are deprecated and you would need to use item-start and item-end which would allow to support both Right to Left and Left to Right.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
ion-row has several attributes (see Row). The one that looks suitable for you is align-items-center.
So, you can try this:
<ion-grid>
<ion-row align-items-center>
...
if you add new col, it mean that will be another column and you don't have unspecified the dimensions of these
When you add
you can insert one ion-item to insert everything on the same line without static sizes.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
I am developing a Mobile App using the Ionic2-Framework along with Angular2.
In a section of my app, I have several <ion-slides> with <ion-item><ion-input ...></ion-input></ion-item> on the slides.
When changing the slide, the keyboard opens up without actively touching one of the input-fields. So far, I could only test it on iOS, but I found out that it only happens for type="tel"-inputs
Is there a way to prevent the app from doing this, as I would like the users to choose the time to input by themselves.
The code of my page looks like that:
(I excluded some parts for readability)
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle [hidden]="showBackButton">
<ion-icon color="primary" name="menu"></ion-icon>
</button>
<button color="light" ion-button icon-only [hidden]="!showBackButton" (click)="goToPreviousSlide()">
<ion-icon color="primary" name="arrow-back"></ion-icon>
</button>
<ion-title>Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides (ionSlideDidChange)="updateShowBackButton()">
<!-- Some more slides... -->
<ion-slide style="background-color: white" padding>
<h2 class="slide-title">Hello {{person.name}}!</h2>
<p>Now I need this and that information:/p>
<ion-item>
<ion-label>Day</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.day"></ion-input>
</ion-item>
<ion-item>
<ion-label>Month</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.month"></ion-input>
</ion-item>
<ion-item>
<ion-label>Year</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.year"></ion-input>
</ion-item>
<ion-item-divider></ion-item-divider>
<ion-item>
<ion-label>Height (cm)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.height"></ion-input>
</ion-item>
<ion-item>
<ion-label>Weight: (kg)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.weight"></ion-input>
</ion-item>
<button ion-button block (click)="goToNextSlide()">Next</button>
</ion-slide>
<!-- Some more slides... -->
</ion-slides>
</ion-content>
If you need futher information, please let me know! I am appreciating any hints! :)
I am new to the ionic framework, When i was entering the input type button it is going to the bottom of the page. How can i overcome these error.
Below is my code:
<ion-header></ion-header>
<ion-content padding>
<h2></h2>
<div>
<img class="displayed" style="height:100px; width:100px text-align: center;" src="assets/img/logo.png">
<h2>Forgot Password</h2>
</div>
<p class="side" style= "margin-top:90px; color:grey; font-size:18px; font-family:'Arial', Helvetica, sans-serif">Enter the Phone number associated with your account, and we'll send an OTP to reset your password</p>
<ion-item>
<ion-label stacked>PHONE</ion-label>
<ion-input type="number" value="" ></ion-input>
<input type="number" placeholder="8121218820" ng-model="data.number"
required>
</ion-item>
<button ion-button color="secondary" round>SEND OTP</button>
</ion-content>
Below is my screen image:
I really did not understand your question but
but in your code above if you are using the
<ion-input type="number" value="" ></ion-input>
then why are you again using input type="number" placeholder="8121218820" ng-model="data.number"
required>
what is that all about besides if you are using ionic2 you are also using angular2 in conjunction
its not ng-model
<ion-input type="number" [(ngModel)]="data.number"></ion-input>
also set a default value for field values in ionviewdidload function or in the constructor not in your view