Hi I already tried How to align ion-label to right, but this is not what I need. It is my first project in ionic 2 and java script, so i apologized if it is a stupid question.
I have a ion list:`
<ion-list >
<ion-item>
<ion-label floating>Company Name</ion-label>
<ion-input type="text" value="{{this.navParams.data.tenant.name}}"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Bot name</ion-label>
<ion-input type="text" value="{{this.navParams.data.tenant.name}}"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Bot Url</ion-label>
<ion-input type="text" value="{{this.navParams.data.tenant.name}}" text-left></ion-input>
<ion-label>mydomain.com</ion-label>
</ion-item>
</ion-list>
`
What I got is this:
What I want is:
".myDomain.com" should be a ion-label fixed the user can only change "Audi" to another.
You just need to set and order like the example
.label-right{
order: 2
}
<ion-list>
<ion-item>
<ion-label floating>Bot Url</ion-label>
<ion-input type="text" value="{{this.navParams.data.tenant.name}}" text-left></ion-input>
<ion-label class="label-right">mydomain.com</ion-label>
</ion-item>
</ion-list>
Related
This question was also asked here, but the solution was several years old and not well-suited for me since it's an earlier version of Ionic. I want to put City and State next to each other as an ion-input (with a floating label) and an ion-select (no label). Below is my HTML and the resulting display:
[![Result][1]][1]
<ion-row>
<ion-col size="8">
<ion-item lines="full">
<ion-label position="floating">City</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size="4">
<ion-item lines="full">
<ion-select placeholder="State">
<ion-select-option [value]="st" *ngFor="let st of [{ name: 'Louisiana'},{name: 'Texas'}]">{{st.name}}
</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>```
[1]: https://i.stack.imgur.com/q5Hqj.png
You can use ion-label with stacked position on your select options.
<ion-grid>
<ion-row>
<ion-col size="8">
<ion-item lines="full">
<ion-label position="floating">City</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size="4">
<ion-item lines="full">
<ion-label position="stacked">City</ion-label>
<ion-select placeholder="State">
<ion-select-option [value]="st" *ngFor="let st of [{ name: 'Louisiana'},{name: 'Texas'}]">{{st.name}}
</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
Page.html
<form [formGroup]="myForm">
<ion-button [(ngModel)]="isActive"(click)="onClick()" >Add</ion-button>
<ion-item>
<ion-label position="floating">First Name</ion-label>
<ion-input type="text" [(ngModel)]="firstname" formControlName="firstname" ></ion-input>
</ion-item>
<ion-item class="item_country" >
<ion-label position="floating">Date Of Birth</ion-label>
<ion-datetime formControlName="date" [(ngModel)]="date" displayFormat="DD/MMM/YYYY">
</ion-datetime>
</ion-item>
<ion-item>
<ion-label position="floating">Passport number</ion-label>
<ion-input type="text" formControlName="passport" [(ngModel)]="passport" >
</ion-input>
</ion-item>
<div *ngIf="isActive">
<ion-item>
<ion-label position="floating">First Name</ion-label>
<ion-input type="text" [(ngModel)]="firstname1" formControlName="firstname1" >
</ion-input>
</ion-item>
<ion-item class="item_country" >
<ion-label position="floating">Date Of Birth</ion-label>
<ion-datetime formControlName="date1" [(ngModel)]="date1"displayFormat="DD/MMM/YYYY">
</ion-datetime>
</ion-item>
<ion-item>
<ion-label position="floating">Passport number</ion-label>
<ion-input type="text" formControlName="passport1" [(ngModel)]="passport1" >
</ion-input>
</ion-item>
</div>
page.ts
onClick(){
this.isActive = !this.isActive;
}
It will give formcontrol error like below:
I can't understand where am going wrong please help me. I want to show input fields when I click on a button and also hide when I click on it. but give error please help for this. Thank you for your help
You can't use both formControl and ngModel, just use one of them.
Read through the error screenshot you have posted. It has explanation.
If you want to use both formControlName and ngModel use [ngModeloptions]="{standalone:true}"
Remove ngModel from the input tag. You are using both ngModel (Template-driven based) as well as formControlName(Reactive form) on the input.
Or if you want to use it with ngModel then use [ngModelOptions]="{standalone: true}" with it. It is specified in your screenshot also.
Refer this: https://github.com/angular/angular/pull/10314#issuecomment-242218563
I an making an app using Ionic and AngularJS. I made a page, but when I put this HTML on it it does not load to anything other than a blank screen. When I click on the navigation link in the sidemenu, nothing happens, and Ionic does not even try to load the page. I am probably missing something obvious, but help would be appreciated. Here is my ion-content:
<ion-content>
<ion-list>
<ion-item>
<ion-label>Happiness</ion-label>
<ion-range value="100">
<ion-label slot="start">ðŸ˜</ion-label>
<ion-icon slot="end">😀</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Fear</ion-label>
<ion-range value="100">
<ion-label slot="start">😬</ion-label>
<ion-icon slot="end">👌</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Anger</ion-label>
<ion-range value="100">
<ion-label slot="start">😡</ion-label>
<ion-icon slot="end">👌</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Stress</ion-label>
<ion-range value="100">
<ion-label slot="start">😰</ion-label>
<ion-icon slot="end">👌</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Energy</ion-label>
<ion-range value="100">
<ion-label slot="start">😴</ion-label>
<ion-icon slot="end">âš¡</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Worry</ion-label>
<ion-range value="100">
<ion-label slot="start">😟</ion-label>
<ion-icon slot="end">👌</ion-icon>
</ion-range>
</ion-item>
<ion-list>
<ion-button color="primary">Save</ion-button>
</ion-content>
Thanks in advance.
Your ion-list tag is not closed. Missed a / there.
I have 4 checkboxes. How do i get the values of those that are checked? What should i type in my typescript folder? I am trying to get the values so that i can save it into firebase. Here is my .html code.
<ion-content padding>
<ion-list>
<ion-item>
<ion-label>Bedrooms</ion-label>
<ion-checkbox [(ngModel)]="bedrooms" (ionChange)="updateBedrooms()"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Toilet</ion-label>
<ion-checkbox [(ngModel)]="toilets" (ionChange)="updateToilets()">
</ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Living Room</ion-label>
<ion-checkbox [(ngModel)]="livingroom" (ionChange)="updateLivingRoom()"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Kitchen</ion-label>
<ion-checkbox [(ngModel)]="kitchen" (ionChange)="updateKitchen()">
</ion-checkbox>
</ion-item>
</ion-list>
<button (click)="onLoadTasks()" ion-button block>Choose Tasks<ion-
icon name="arrow-dropright"></ion-icon></button>
try this for the 4 ones
kitchen: boolean;
updateKitchen() {
console.log('new state:' + this.kitchen);
}
I have implemented a login page but the forms dont display the input area (lines)
This is what i have
<ion-list>
<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-list>
<ion-list>
The above generates
I was lookingb forward to have
As you can see the input fields arent visible on the first image, What else do i need to add
Just check if you have included the .css files and referenced it in the index.html
<ion-navbar *navbar>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
<ion-content >
<ion-list>
<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-list>
</ion-content>
DEMO