I have create a app using ionic 3 and i click on the login link i got this error "Cannot find control with fname, email,number,gstNumber and i have tried formGroupName instead of the formControlName but still not working Please help me for figuring out what I am doing wrong and i have include the page of login and createAccount? `
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { CreateAccountPage } from '../create-account/create-account';
import { LoginPage } from '../login/login';
#Component({
selector : 'page-home',
templateUrl : 'home.html'
})
export class HomePage {
constructor(public navCtrl : NavController) {
}
openLoginPage() {
this.navCtrl.setRoot(LoginPage);
}
openCreateAccount(){
this.navCtrl.setRoot(CreateAccountPage);
}
}
<ion-content class="masters" >
<ion-card>
<img src="assets/imgs/riseBgdd.jpg" height="550px">
<button class="card-button button-color-yell" color="light" outline small ion-button style="left:90px" (click)="openLoginPage()" >
Login
</button>
<button class="card-button1 button-color-blue" color="light" outline small ion-button style="left:150px" (click)="openCreateAccount()" >
Create Account
</button>
</ion-card>
</ion-content>
//This is our Creat account page
<!DOCTYPE html>
<ion-content>
<h3 text-center>
Create Account
</h3>
<form [formGroup]="createAccountForm" >
<ion-list>
<ion-item class="round-inp centerIt">
<ion-input formControlName="firmName" type="text" placeholder="Firm name" >
</ion-input>
</ion-item>
<br>
<ion-item class="round-inp centerIt">
<ion-input formControlName="yourName" type="text" placeholder="Your name" [(ngModel)]="yourName">
</ion-input>
</ion-item>
<br>
<ion-item class="round-inp centerIt">
<ion-input formControlName="email" type="email" placeholder="Email" [(ngModel)]="email">
</ion-input>
</ion-item>
<br>
<ion-item class="round-inp centerIt">
<ion-input formControlName="mobileNumber" type="number" placeholder="Mobile number" [(ngModel]="mobileNumber">
</ion-input>
</ion-item>
<br>
<ion-item class="round-inp centerIt">
<ion-input formControlName="gstNumber" type="number" placeholder="GST number" [(ngModel)]="firmName">
</ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<!DOCTYPE html>
<ion-content class="masters">
<br>
<div class="centerIt">
<ion-img src="assets/imgs/icon image.jpg"
width="60" height="60"
class="app-icon">
</ion-img>
</div>
//This is our login page
<form [formGroup]="loginForm" (submit)="loginUser($event)">
<ion-list>
<ion-item class="round-inp centerIt">
<ion-label>
Email or Phone
</ion-label>
<ion-input formControlName="email" type="text" value=""></ion-input>
</ion-item >
<br>
<ion-item class="round-inp centerIt">
<ion-label>
Password
</ion-label>
<ion-input formControlName="password" type="password"></ion-input>
</ion-item>
<br>
<br>
<div class="centerIt">
<button ion-button outline
class="button-color-yellow"
(click)="openSelectCategory()">
Login
</button>
<button ion-button outline
class="button-color-yello"
(click)="openCreateAccount()">
Create Account
</button>
</div>
<br>
<br>
<div class="centerIt">
<a href="openLogin()" class="link-align-color" >
Forgot Password
</a>
</div>
</ion-list>
</form>
</ion-content>
`
You can change your object from any to FormGroup type:
private createAccountForm : FormGroup
I'm pretty sure, that you don't need ngModel. Try also the other method of binding:
formControlName
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input formControlName="email" type="email"></ion-input>
</ion-item>
[formContol]
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input [formControl]="createAccountForm.controls['password']" type="text"></ion-input>
</ion-item>
I made similar example on plunkr with forms and it just works fine, check it out:
https://plnkr.co/edit/zGenYZz5lzGbWBBTBS9P
Related
I am getting Error for the ngModel.
_co.userData is not defined.
I have posted my home.ts and home.html file.
browser console showing the error is near [(ngModel)].
This is my home.ts file
import { Component, NgModule } from '#angular/core';
import { NavController } from 'ionic-angular';
import { AuthService} from '../../providers/auth-service/auth-service';
import { CompanygroupsPage } from '../companygroups/companygroups';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
responseData:any;
userData:{"username":"hi","password":"123"}
constructor(public navCtrl: NavController, public authService:AuthService){}
login(){
console.log(this.userData);
this.navCtrl.push(CompanygroupsPage);
}
}
This is my home.html file
<ion-content padding class="home">
<ion-list class="login">
<form>
<ion-item class="inputs">
<ion-label stacked>Username</ion-label>
<ion-input value="" type="text" [(ngModel)]="userData.username" name="username"></ion-input>
<ion-icon name="contact" item-left></ion-icon>
</ion-item>
<ion-item class="inputs">
<ion-label stacked>Password</ion-label>
<ion-input type="password" value="" [(ngModel)]="userData.password" name="password"></ion-input>
<ion-icon name="lock" item-left></ion-icon>
</ion-item>
<button (click)="login()" class="btn_login" ion-button color="light" round>Login</button>
</form>
</ion-list>
<ion-footer class="footer">
<ion-toolbar>
...
</ion-toolbar>
</ion-footer>
Error is near
<ion-input value="admin" type="text" [(ngModel)]="username" name="username"></ion-input>
You need to assign,
Change
From
userData:{"username":"hi","password":"123"}
To
userData = {"username":"hi","password":"123"}
I'm getting some posts to my ionic app via JSON data , and I'm filetering the posts receipts with a searchbar input , the problem that the search bar input and the filetered results are showing in the same page , I want to show the result in another page , and the first page will be only for the search bar .
(I added the new page and I'll add a button for the search page
)
This is my code :
<label class="item item-input">
<input type="text" placeholder="Nom du Jneyne" ng-model="nom" ng-
change="showSelectValue(nom)">
</label>
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right"
ng-repeat="post in (filteredItems = ( recent_posts
| filter:{title:nom} " href="#/main/postDetail/{{post.id}}">
<img ng-src="{{post.thumbnail}}" />
<h2>{{post.title}}</h2>
<p ng-bind-html="post.excerpt" </p>
<ion-option-button class="button-dark">
<i class="icon ion-heart"></i>
</ion-option-button>
</ion-item>
</ion-list>
try adding ng-if and change code as
<label class="item item-input" ng-if="srhItem">
<input type="text" placeholder="Nom du Jneyne" ng-model="nom" >
<input type ="submit" value="search" ng-click="showSelectValue(nom)">
</label>
and your display part to
<div ng-if = displayResult>
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right"
ng-repeat="post in (filteredItems = ( recent_posts
| filter:{title:nom} " href="#/main/postDetail/{{post.id}}">
<img ng-src="{{post.thumbnail}}" />
<h2>{{post.title}}</h2>
<p ng-bind-html="post.excerpt" </p>
<ion-option-button class="button-dark">
<i class="icon ion-heart"></i>
</ion-option-button>
</ion-item>
</div>
and add $scope.srhItem = false,$scope.displayResult = true in your showSelectValue() function.and dont forget to add $scope.srhItem = true at the beginning of your controller
i want to remove the border around the ionic-toggle
<ion-content ng-init="checkarrivee.getAllListeCriteres();">
<div class="swipe" on-swipe-left="warn('Must use scope')">Swipe div</div>
<div class="list" style="width: 95%;margin-left: 2%">
<span us-spinner="{color: 'blue', radius:30, width:8, length: 16}" spinner-key="spinner-0"></span>
<label class="item item-input item-stacked-label">
<span class="input-label">Mission en cours :</span>
<input ion-autocomplete name="vehicule" type="text" readonly="readonly" class="ion-autocomplete"
items-clicked-method="itemsClicked(callback)"
items-removed-method="itemsRemoved(callback)"
placeholder="Séléctionner une mission"
items-method="getMissionEnCours(query)"
external-model="initialCountry"
item-view-value-key="codeDeFicheDeMission"
items-method-value-key="items"
max-selected-items="1"
autocomplete="off"
ng-model="checkarrivee.ficheDeMission"
required/>
</label>
</div>
<ion-list ng-repeat="(key,value) in checkload | groupBy:'Niveau'">
<div class="item item-divider" >{{key}}</div>
<ion-item on-swipe-left="warn('Must use scope')" ng-repeat="var in value" >
<ion-toggle ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
<button class="button button-clear icon ion-star button-assertive"
ng-click="toggleStar(var)" ng-show="var.star">
</button>
<ion-option-button class="button-dark" >
<i class="icon ion-star"></i>
</ion-option-button>
</ion-item>
</ion-list>
image:
If you do not want the border to show for the toggle's just add style='border:0;' like this:
<ion-toggle style="border:0;" ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
But I would suggest not using inline CSS, and instead adding all styling to your css/scss file as it will become much more difficult to maintain as the project scales.
EDIT:
For the CSS it will be something like this .list .item .noToggleBorder{border:0;}
Here's a codepen for you to check it out.
I have a FORM inside Ion-content and I want to submit that FORM from the button placed inside Ion-footer with all the form validations. Structure of the code at http://play.ionic.io/app/07e251b1e926,
But It is not triggering submit event.Anyone has done this?
Try this, Add label outside form as button and add hidden button inside form also.
<form name="myform" ng-submit="submitmyform()" >
<input type="submit" id="submit" value="Submit" style="display:none"/>
then footer label give for attribute set thebutton id in the form
<label style="width:100%;heigh:30px;background-color:red" for="submit">Submit</label>
Also Should include controller [formController] outside form also.
http://play.ionic.io/app/0e22c14ea697
Using the latest version of Ionic ion-footer you need to add your form again within the footer tags. Footer should be after ion-content close. I did this and now my form can scroll behind the footer and has an extra item-worth of padding at the bottom!
<ion-header>
<ion-navbar>
<ion-title>New Project</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<form [formGroup]="newProjectForm" (submit)="addProject()" novalidate>
<ion-list>
<ion-item>
<ion-label color="primary" stacked>Project Title</ion-label>
<ion-input formControlName="title" clearInput></ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<ion-footer>
<form [formGroup]="newProjectForm" (submit)="addProject()" novalidate>
<ion-toolbar>
<button ion-button block color="green" type="submit">
Save
</button>
</ion-toolbar>
</form>
</ion-footer>
This is what helped me on ionic 3, FormBuilder with validation.
<ion-content padding>
<form (ngSubmit)="login()" #loginForm="ngForm">
<ion-list>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="text" [(ngModel)]="form.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="form.password" name="password"></ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button block full large clear [disabled]="!loginForm.form.valid" (click)="loginForm.ngSubmit.emit()">Login</button>
</ion-toolbar>
</ion-footer>
you can use this code in ionic2:
<ion-content>
<form (ngSubmit)="login()" #loginForm="ngForm">
<ion-list>
<ion-item>
<ion-label>Email</ion-label>
<ion-input type="text" [(ngModel)]="form.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" [(ngModel)]="form.password" name="password"></ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<ion-footer>
<button ion-button full (click)="loginForm.ngSubmit.emit()">Login</button>
</ion-footer>
Maybe this is a better alternative if you are using FormBuilder instead of ngModel.
Put this code after the form crated in your .ts file.
this.signForm.statusChanges
.subscribe(status => this.formIsValid = status);
In the .html file you can check if the form is valid like this.
<button ion-button round large color="secondary" float-right [disabled]="!formIsValid" (click)="onSubmit()">Save</button>
I know is old question, but the best way i see:
<div>
<form id="my-form">
<label for="name">Name:</label>
<input type="text" name="name"></input>
</form>
<!-- ... -->
<button type="submit" form="my-form">Submit</button>
</div>
I am trying to set the value of input equal to the item in ion-list based on a click event. The value updates on first click event but is not updating on later clicks
<ion-view view-title="Add Cities">
<ion-content>
<label class="item-input-wrapper bar-subheader">
<i class="icon ion-android-search placeholder-icon"></i>
<input style="width:100%" type="text" placeholder="Search" ng-model="CityName">
</label>
<ion-button class="button ion-plus button-positive" ng-click="addCity(CityName)" >Add</ion-button>
<div class="list">
<ion-list>
<ion-item ng-repeat="item in states|filter:CityName" ng-click="set(item)">
{{item}}
</ion-item>
</ion-list>
</ul>
</div>
</ion-content>
</ion-view>
associated function in controller.js
$scope.set=function(title){
$scope.CityName=title;
console.log(title);
}
i have checked console the function triggers but the input updates only once
i have tried adding $scope.$apply() in function set but it's still not working. Please suggest edits in the above code or is there a better method to do the same?
The answer is explained here by #Pankaj Parkar
My problem was fixed by renaming ng-model="CityName" to ng-model="data.CityName"
<input style="width:100%" type="text" placeholder="Search" ng-model="data.CityName">
and changing this
$scope.set=function(title){
$scope.CityName=title;
console.log(title);
}
to
$scope.set=function(title){
$scope.data={'CityName':title};
console.log(title);
}