Я недавно начал изучать Ionic 3 и Angular и столкнулся с некоторыми проблемами. Я хотел реализовать форму входа в систему, используя conference template
, предоставленную Ionic, но что бы я ни делал, страница входа не будет отображаться. Страницу входа можно найти, нажав на боковое меню шаблона.
Это мой старый шаблон HTML:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic logo">
</div>
<form #loginForm="ngForm" novalidate>
<ion-list>
<ion-item>
<ion-label stacked color="primary">Email</ion-label>
<ion-input [(ngModel)]="login.email" name="email" type="email" #email="ngModel" spellcheck="false"
autocapitalize="off"
placeholder="Your email" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="email.valid || submitted == false" color="danger" padding-left>
Email is required
</p>
<ion-item>
<ion-label stacked color="primary">Password</ion-label>
<ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" placeholder="Your password" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
Password is required
</p>
</ion-list>
<p padding class="text-ios-danger">
{{loginError}}
</p>
<ion-row responsive-sm>
<ion-col>
<button ion-button (click)="onLogin(loginForm)" type="submit" block>Login</button>
</ion-col>
<ion-col>
<button ion-button (click)="onSignup()" color="light" block>Signup</button>
</ion-col>
</ion-row>
</form>
</ion-content>
А это мой новый:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="top">
<img src="assets/logo.png" >
</div>
<!-- Social Login Buttons -->
<div class="bottom">
<div class="form" *ngIf="mode == 'main'">
<div>
<form [formGroup]="emailPasswordForm">
<ion-list>
<ion-item no-lines>
<ion-input type="email" formControlName="email" placeholder="Email Address"></ion-input>
</ion-item>
<ion-item no-lines>
<ion-input type="password" formControlName="password" placeholder="Create Password"></ion-input>
</ion-item>
<button ion-button icon-left class="dark" tappable (click)="login()" [disabled]="!emailPasswordForm.valid">LOGIN</button>
</ion-list>
</form>
</div>
</div>
</div>
</ion-content>
Буду признателен за любые предложения, спасибо.