I am trying to modify a project code, the project is written in ionic but I am not ionic developer
I did some search and change the UI from input field to select, but the value is not shown in the select
the old code
<ion-input name="url" placeholder="{{ 'core.login.siteaddressplaceholder' | translate }}" formControlName="siteUrl"[core-auto-focus]="showKeyboard && !showScanQR" (ionChange)="searchSite($event, siteForm.value.siteUrl)">
</ion-input>
my new code is
<ion-select name="url" placeholder="{{ 'core.login.siteaddressplaceholder' | translate }}" formControlName="siteUrl"[core-auto-focus]="showKeyboard && !showScanQR" (ionChange)="searchSite($event, siteForm.value.siteUrl)">
<ion-select-option value="HTTP://www.google.com">Google</ion-select-option>
<ion-select-option value="HTTP://www.facebook.com">Facebook</ion-select-option>
</ion-select>
Related
Currently I am using the vee-validate v4 library to validate all my form inputs, How can I use the datepicker with vee-validate to change the date format ? I am using schema format to validate the fields like :validation-schema="schema" And I have to change the date format to be mm/dd/yyyy
<Form class="row g-3" :validation-schema="schema" #submit="submit($event)" v-slot="{ errors }">
<div class="col-md-6">
<label for="inputdate" class="form-label"
>Expiration Date<span class="required-field"></span></label>
<Field
name="ExpiryDate"
type="date"
v-model="ExpiryDate"
placeholder="Enter date"
class="form-control"
id="inputdate"
:class="{ 'is-invalid': errors.ExpiryDate }"
/>
<div class="invalid-feedback">
{{ errors.ExpiryDate }}
</div>
</div>
</Form>
There is no direct way to achieve the validation of datepicker through vee-validate, you will have to handle it manually through code.
I am using Ionic 5 in a project.
One thing I need is an input type number with up / down increment arrows like this image:
How can I do that as I cannot see any examples of that on the UI Components on their website.
Set the type attribute of ion-input to "number":
<ion-input type="number" value="5" min="1" max="9"></ion-input>
I am trying to load data from a http call into a select as per the code below.
<ion-select [(ngModel)]="dealer">
<ion-option *ngFor="let dealerDetails of dealers">{{dealerDetails.name}}</ion-option>
</ion-select>
This returns
ERROR Error: Uncaught (in promise): Error: Template parse errors:
'ion-option' is not a known element:
1. If 'ion-option' is an Angular component, then verify that it is part of
this module.
2. If 'ion-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to
the '#NgModule.schemas' of this component to suppress this message. ("
I have tried the # instead of the let to no avail.
also this code works perfectly for the list as per below code:
<ion-list>
<ion-item *ngFor="let dealerDetails of dealers">{{dealerDetails.name}}</ion-item>
</ion-list>
Sounds so simple but I've tried quite a few things and none work.
I'm using Angular 4 and my form is template-driven:
<form #form="ngForm" novalidate>
<label for="insz">{{ 'SEARCH_PAGE.searchInszNumber' | translate }}</label>
<input type="text" name="insz" [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
<button (click)="onSearch(input.value)" ><span>{{'SEARCH_PAGE.search' | translate }}</span></button>
</form>
I want to disable the button when the (one and only) input field is empty.
You are missing ngModel in your input, for your input field to actually be a form control:
<input type="text" name="insz" ngModel
[placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
and then you need to disable the button of course if form is not valid:
<button [disabled]="!form.valid" (click)="onSearch(input.value)" >Submit</button>
You could take a look at reactive forms. I had no knowledge of them until a week ago, but they're so powerful !
This means all you need to do is add a Validator (Validators.required in your case), and add a disabled condition to your button. And that's it, you're set.
I'm using ion-slides as the following:
<div *ngFor="let category of categories">
<h6 class="slide-title" [innerHTML]="category.name"></h6>
<ion-slides [loop]="true" [pager]="true" [slidesPerView]="3">
<ion-slide *ngFor="let product of category.products">
<img [src]="product.image" class="slide-image">
</ion-slide>
</ion-slides>
</div>
I'm getting the following error:
Unhandled Promise rejection: Template parse errors:
Can't bind to 'slidesPerView' since it isn't a known property of 'ion-slides'.
If 'ion-slides' is an Angular component and it has 'slidesPerView' input, then verify that it is part of this module.
If 'ion-slides' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message.
("h6 class="slide-title" [innerHTML]="category.name">
][slidesPerView]="3">
<img [src]="product"): MainPage#12:43 ; Zone: ; Task: Promise.then ; Value: ....
can anyone help please.
ionic -v
2.2.1
cordova -v
6.5.0
Recently there was some changes in ion-slides. Make sure you have the latest ionic version (2.0.0).
Also you can use slidesPerView without enclosing it in square brackets as follows
<ion-slides pager loop slidesPerView="3">
<ion-slide>
...
</ion-slide>
<ion-slides>