To get user ratings I am using a ion-range component inside a form. Though it is a required field system allow to save reviews without set the rating value.
<ion-content>
<form #Form="ngForm" (ngSubmit)="save()" >
<ion-item>
<ion-range min="0" max="100" pin="true" [(ngModel)]="rating" [ngModelOptions]="{standalone: true}" required>
<ion-icon range-left name="sad"></ion-icon>
<ion-icon range-right name="happy"></ion-icon>
</ion-range>
</ion-item>
<button ion-button [disabled]="!Form.form.valid" ion-button full color="secondary" >Save</button>
</form>
</ion-content>
What is the reason behind this?
The required attribute is not part of the Range component, so it won't work in that way.
What you can do, is to add another condition to the disabled attribute of the button, like this
<button ion-button [disabled]="!Form.form.valid || rating === 0" ion-button full color="secondary" >Save</button>
This way the button will still be disabled if the rating property is equal to 0.
Related
I am working in Ionic app and I have used the ion-item in my app and I want select one item before moving to the next page but I am not able to select the item.
This is my shipping.html:
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end"></ion-checkbox>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, I am showing the items in the loop. It is showing the data but the problem is that I am not able to select the item. I have also used the checkbox but when using the checkbox, it is not showing the p and h2 tags in the view.
This is result in the html, when using the checkbox it is not showing the p and h2 tag. When I am not using the checkbox, it is showing the p and h2 tag.
Any help is much appreciated.
Just Try This: It Works!
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
<!-- <ion-radio slot="start"></ion-radio> -->
<!-- <ion-toggle slot="start"></ion-toggle> -->
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, It will show the checkbox for all the items and the text also.
I am working In Ionic App and I have shown the item list in which I have the checkbox for the item selection. User can select only one item but the problem is that, In my item list user is able to select all items.
This is my shopping.html:
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
<!-- <ion-radio slot="start"></ion-radio> -->
<!-- <ion-toggle slot="start"></ion-toggle> -->
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, I am showing the check-boxes with the items where user can select the item.
This is my shopping.ts:
isCheckboxDisabled:boolean=false;
selectCP(itm){
}
I am not able to make the logic for that. In my html, user can select all the items. Any help is much appreciated.
You may use ion-radio instead.
<ion-list>
<ion-radio-group>
<ion-item *ngFor="let itm of shippingdetails">
<ion-label>{{itm.name}}</ion-label>
<ion-radio value="{{itm.id}}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
have divided my form into divs on one ionic html page want to display one at a time, navigate until submit any help, my form is somehow like this, the first should display by default but the other divs should be displayed on clicking next
<div id="formPart1">
<ion-row>
<label>select date</label>
<ion-input type="date" ng-model="date"></ion-input>
<button ion-button full ng-click="showNext()">Next</button>
</ion-row>
</div>
<div id="formPart2">
<ion-row>
<label>select date</label>
<ion-input type="name" ng-model="name"></ion-input>
</ion-row>
</div>
In this case, i suggest you to use ion-slides. Distribute form elements to the slides. and lock swipe on page load and only change to next slide on Next button click.
Do this to lock swiping
ionViewDidLoad() {
console.log('ionViewDidLoad ServicePage');
this.slides.lockSwipes(true);
}
and on Next button click
goToSlide(slideNo) {
this.slides.lockSwipes(false);
this.slides.slideTo(slideNo, 500);
this.slides.lockSwipes(true);
}
So, First of all you have to write the code like this
<div id="formPart1">
<ion-row>
<ion-label>select date</label>
<ion-input type="date" [(ngModel)]="date"></ion-input>
<button ion-button full (click)="showNext()">Next</button>
</ion-row>
</div>
<div id="formPart2" [hidden]="!YOUR_VARIABLE">
<ion-row>
<ion-label>select date</label>
<ion-input type="name" [(ngModel)]="name"></ion-input>
</ion-row>
</div>
in the show showNext() method you have to make the variable true, like this
showNext() {
this.YOUR_GLOBAL_VARIABLE = true
}
Hope this will help you !!!
I'm learning Ionic 3 and I want create a dynamic form.
A dynamic form for me is a form that increases when I press a FAB button (like alarm native app in Android), I read dynamic forms in angular page but I think it's not what I'm looking for.
This is my code, but I think my base idea is correct, it's possible create something like this in Ionic 3?
<ion-list id="horario-list9">
<ion-item-divider color="light" id="horario-list-item-divider3">
<ion-list-header>
<h2>{{titles[0]}}</h2>
</ion-list-header>
</ion-item-divider>
<ion-item id="horario-range1">
<ion-range style="padding-left:0px" [(ngModel)]="quantity1" min="0" max="6" step="1" color="balanced" value="0" name="ration1">
<ion-icon range-left>
<img src="assets/imgs/cup.svg" alt="" height="40px" width="40px">
</ion-icon>
<ion-label range-right>
<div *ngIf="quantity1; else other_quantity1">
<p style="font-size:40px;color:#AED581">{{quantity1/2}}</p>
</div>
<ng-template #other_quantity1>
<p style="font-size:40px;color:black">0</p>
</ng-template>
</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="md-time" style="font-size:50px"></ion-icon>
</ion-label>
<ion-datetime style="font-size:40px" displayFormat="HH:mm" pickerFormat="HH mm" [(ngModel)]="event.timeStarts1"></ion-datetime>
</ion-item>
<div class="spacer" style="width:300px;height:30px;" id="horario-spacer6"></div>
<ion-fab center>
<button ion-fab color="secondary"><ion-icon ios="ios-add" md="md-add"></ion-icon></button>
</ion-fab>
</ion-list>
This look like this My form in Safari
I want create a dynamic form, I need when I press my green button add new ion-item in my list, it's possible? Angular documentation failed to explain this question
I want to set menuToggle button in the left side of input text I used this code:
<div id="searchDiv">
<ion-item>
<button item-start ion-button icon-only color="dark" menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<input type="text" placeholder="I'm Searching For .." [(ngModel)]="searchInput" />
</ion-item>
</div>
and I get this output:
If I remove menuToggle from tag button to be:
<button item-start ion-button icon-only color="dark" menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
It align to left correctly, I don't know what is the problem with menuToggle, what should i do?
In src\app\app.html set this:
<ion-menu [content]="content" side='right'>
This will work correctly.
if you want menu toggle at right side then do it and this will be at your page
<div class="bar bar-header"> <h1 class="title">Header Buttons</h1> <button item-start ion-button icon-only color="dark" menuToggle> <ion-icon name="menu"></ion-icon> </button> </div>
use this code for buttons