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>
Related
I have used mat-date-picker inside my application, the html file looks like this :
<mat-form-field>
<input matInput [matDatepicker]="picker" formControlName="date" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
I have used the exact same piece of code in my another component and it works, but in this component it displays the error:
ERROR Error: mat-form-field must contain a MatFormFieldControl.
Even though the page is loading after the error, the button of date picker doesnot get displayed and i cannot select a date.
Make sure you've imported the module MatInputModule.
I am using Ionic 3 as a framework for my app. the app has a small configuration page. the user can choose different ranges via three dualknob sliders. the idea is, that those upper and lower limits are used to validate data which the user can enter on other pages. if a value is not between this range, the user gets an alert-toast.
im using firebase/angularfire2 as a database.
my html code with 3 sliders looks like this:
<ion-item>
<ion-label>Range 1</ion-label>
<ion-range min="-250" max="250" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range1" color="secondary">
<ion-label range-left>-250g</ion-label>
<ion-label range-right>250g</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Range2</ion-label>
<ion-range min="0" max="200" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range2" color="secondary">
<ion-label range-left>0</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Range3</ion-label>
<ion-range min="0" max="200" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range3" color="secondary">
<ion-label range-left>0</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</ion-item>
I want to bind these three ranges to a single model to directly store it in firebase. So I created an interface, but I only manage to bind one range to this interface. the knobs of the other 2 ranges can't be moved and say "NaN" on their knobs. I tried to bind them to different elements of my interface called "config", but that didn't work. I also created fields called upper/lower in the limit but it didnt work.
Binding the ranges to three differentImodels worked. i then mapped it to my database model and saved them to firefase. but the other they round didnt work - the knobs didnt accept the values from the database.
thank you for your help.
Solved it myself by using a single model per Range-Slider and mapping the values in both directions to and from my database object before commiting.
slider1 = {} as any;
this.slider1.upper = (this.config.slider1max) ? this.config.slider1max : '100';
config.slider1max = this.slider1.upper;
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>
How can I use ngModel for inputs across multiple forms that's repeated by ngFor?
Angular2 gives me error when I'm trying to do so.
Error: Permission denied to access property "rejection"
Example block of problematic code:
<div *ngFor="let item of items">
<form name="itemForm">
{{item.name}}<input [(ngModel)]="item.name">
</form>
</div>
Here is the plunker
https://plnkr.co/edit/YNZiCBeyqJoxO5ox5nlC?p=preview
If I remove the form tag, it all run without problem, but I need it so I can use enter key on all input to update corresponding data in their own form.
If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
Below will work without any error :
<div *ngFor="let item of items">
<form name="itemForm">
{{item.name}}<input [(ngModel)]="item.name" [ngModelOptions]="{standalone: true}">
</form>
</div>
As pointed out by #ranakrunal9 you can use a unique name attribute for your input. Here the code:
<div *ngFor="let item of items; let index=index">
<form name="itemForm">
{{item.name}}<input [(ngModel)]="item.name" name={{index}}>
</form>
</div>
I have trouble to locate the element using [(ngModel)]. This is angular2 syntax, I can not find any document for this.
<div class="form-group">
<label for="name">Summary</label>
<input type="text" class="form-control" [(ngModel)]="task.summary">
</div>
I tried multiple way to locate the elements, e.g.
var input = element(by.model('task.summary'));
input.sendKeys('123');
expect(input.getAttribute('value')).toBe('123');
But it failed with error Failed: unknown error: angular is not defined.
And I make it work with the following workaround, but I really want to use [(ngModel)] to locate the element.
var input = element.all(by.css('input'));
input.sendKeys('summary');
expect(input.getAttribute('value')).toBe('summary');
I also faced the same issue. I resolved as below. by.model does not support for more then Angular 2.0. So, I resolved using by.css properties.
element(by.css('[name="firstName"]')).sendKeys('Protector User');