How to make the ion range the required field within the form
To get user ratings, I use the ionic range component inside the form. Although this is a required field system, you can save reviews without specifying a 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 for this?
+3
source to share
1 answer
The attribute is required
n't part of the Range component , so it won't work that way.
What you can do is add another condition to the disabled
button attribute like
<button ion-button [disabled]="!Form.form.valid || rating === 0" ion-button full color="secondary" >Save</button>
So the button will still be disabled if the property rating
is 0.
+1
source to share