4.1 静态页面login.html(欢迎加入Q群一起学习讨论657185219)
<ion-content padding>
<form [formGroup]="loginForm" >
<ion-item>
<ion-label>Username</ion-label>
<ion-input type="text" formControlName="LoginID"></ion-input>
</ion-item>
<!-- 有问题的提示语 -->
<p *ngIf="!loginForm.controls.LoginID.valid && loginForm.controls.LoginID.touched" color="danger">LoginID must is email.</p>
<!-- <p *ngIf="loginForm.controls.LoginID.valid && loginForm.controls.LoginID.touched" secondary> LoginID is good</p>-->
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" formControlName="LoginPwd"></ion-input>
</ion-item>
<ion-item>
<button ion-button (click)="login(loginForm.value, $event)" [disabled]="!loginForm.valid">登录</button>
<button ion-button (click)="signup()">注册</button>
</ion-item>
</form>
</ion-content>
主要使用了[formGroup],loginForm.controls 俩个属性
4.1.1 校验的属性说明(可参考model.d.ts所有属性都在)
/**
* A control is marked `touched` once the user has triggered
* a `blur` event on it.
* 鼠标点击过blur后触发touched
*/
readonly touched: boolean;
// 其他慢慢看吧
4.2 login.ts
4.2.1 引入form,具体的看对象form源码文件
import { FormBuilder, Validators } from '@angular/forms';
其中引入FormBuilder,Validators为了在ts中加上校验
4.2.2 加入自定义校验
loginForm = this.formBuilder.group({
'LoginID': ['admin@163.com2', [Validators.required, Validators.minLength(4), emailValidator]],// 第一个参数是默认值
'LoginPwd': ['123456', [Validators.required, Validators.minLength(4)]]
});
下面自定义方法在validator.ts
import {FormBuilder,FormControl,Validators,AbstractControl } from '@angular/forms';
export function emailValidator(control: FormControl): { [s: string]: boolean } {
if (!control.value.match(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/)) {
return { invalidEmail: true };
}
}
4.2.3 在login方法里加入自己的业务逻辑
login(user, _event) {
//自己的业务逻辑
let toast = this.toastCtrl.create({
message: '正在登陆',
duration: 3000,
position: 'middle',
showCloseButton: true,
closeButtonText: '关闭'
});
toast.present();
}
- 大小: 10.3 KB
分享到:
相关推荐
"2 ionic项目简介以及Angularjs 基础.pdf"引导读者进入ionic世界,讲解了ionic框架的构建原理和它与AngularJS的紧密关系。AngularJS是一个强大的前端MVC框架,它的数据绑定和依赖注入等特性使得开发变得更加高效。...
在开发跨平台移动应用时,使用Ionic、Cordova和AngularJS结合可以发挥各自的优势。Ionic提供了一套丰富的UI组件和交互模式,使得开发者能够创建外观和体验一致的应用;Cordova则充当桥接角色,它使得开发者能够利用...
Cordova主要负责将Web应用程序打包成原生应用,而Ionic则提供了丰富的UI组件和工具,用于构建具有现代感的移动应用界面。 **Cordova** Cordova是由Apache软件基金会开发的一款开源移动应用开发框架,它允许开发者...
##### 第一课:生成一个Ionic2应用 - **启动Ionic CLI**:首先,安装Node.js,然后通过npm全局安装Ionic CLI (`npm install -g ionic`). - **创建新项目**:使用命令 `ionic start myAppName tabs --type=angular` ...
- **创建页面、组件、指令、管道和服务**:这些是Angular的核心概念,也是Ionic 2应用程序的基础构建块。例如,页面代表了一个特定的视图,而组件则封装了视图及其相关行为。 #### 模板与样式 - **模板语法**:...
10. **发布与部署**:掌握将Ionic 2应用打包成iOS和Android应用的流程,以及如何通过App Store和Google Play发布应用。 通过《构建移动应用 with Ionic 2 final2.0》的学习,开发者不仅可以掌握Ionic 2框架的精髓,...
Ionic框架的核心特点包括使用AngularJS(现在是Angular)进行数据绑定和状态管理,使用Sass进行样式定义,以及提供了一套丰富的UI组件,如导航、滑动、表单等,用于构建具有原生外观和感觉的应用。此外,Ionic还...
根据提供的文件信息,将生成关于使用Ionic2编写移动应用程序的知识点: 首先,Ionic2是一个用于构建移动应用的开源前端框架。通过使用Ionic2,开发者可以利用Web技术(如HTML、CSS和JavaScript)创建跨平台的移动...
使用 Cordova 构建原生打包应用程序 请参阅 Ionic-AngularJS-IntelXDK-Seed 项目以开始使用构建原生打包应用程序: 英特尔 XDK 将帮助您使用任何 HTML5 项目轻松构建适用于 iPhone/iPad、Android、Windows Phone 和...
Ionic是一款流行的开源框架,用于构建高性能的混合移动应用。它基于Angular,并且使用Web技术如HTML、CSS和JavaScript。在本资源中,我们看到有两个压缩文件:`ionic.rar` 和 `ionic-cmd.rar`,它们可能包含了 Ionic...
1. **组件丰富**:IONIC提供了一系列可定制的UI组件,如导航栏、侧滑菜单、表单控件等,帮助开发者快速搭建应用界面。 2. **性能优化**:通过使用Web Components和CSS3动画,IONIC能够实现接近原生应用的性能。 3. *...
- **准备步骤**:包括生成新的Ionic 2应用、创建必要的服务、添加所需的平台和Cordova插件等。 - **基本布局**:设置主页和清单页面的布局设计。 - **数据模型和Observable**:创建数据模型以存储列表项的信息,并...
本文将深入探讨如何使用Ionic 4、Angular 7和Cordova构建一个CRUD(创建、读取、更新、删除)移动应用。这个教程基于提供的"ionic4-angular7-example"源代码,适合对移动开发感兴趣并有一定前端技术基础的开发者。 ...
ionic cordova build android/ios # 构建对应平台的应用 ``` 总的来说,使用Ionic 3和Angular 4构建模仿京东商城的移动应用,不仅能够利用Web技术栈的优势,还能享受到跨平台开发的便利。通过合理的设计和编码实践...
- **核心组件**:Ionic 提供了一系列用于构建用户界面的核心组件,如按钮、表单元素、导航栏等。 - **示例代码**: - 按钮组件: ```html <ion-button>点击我</ion-button> ``` - 导航栏组件: ```html <ion-...
它包括了登录注册、导航、表单、推送通知等多个常见的移动应用功能,有助于开发者快速理解和掌握 Ionic 的工作原理。 5. **移动应用开发**:Ionic3 提供了一套完整的工具链,包括 CLI(命令行界面)、模拟器和真机...
7. **移动设备API访问**:通过Cordova插件,Ionic应用可以访问手机的硬件功能,如相机、地理位置、通知等。 8. **状态管理和数据流**:可以集成Redux或RxJS来管理应用的状态,实现响应式编程。 9. **测试**:支持...
Ionic 3 提供了一套丰富的 UI 组件,如按钮、表单、滑块、选项卡等,这些组件都是基于 Web 元素的封装,设计风格与原生移动应用保持一致。开发者可以轻松地通过 HTML 属性和事件来控制组件的行为。 **导航和路由** ...
2. **创建基本结构**:介绍如何使用`ionic start`命令创建一个新的应用,以及理解应用的基本目录结构和文件。 3. **集成AngularJS**:由于Ionic是基于AngularJS的,博主可能阐述了如何在Cordova项目中集成Angular,...
- Ionic提供了一系列预先设计好的CSS组件,如按钮、表单、列表等,这些组件不仅外观一致,而且易于使用,极大地提高了开发效率。 - **3.3 整合Ionic CSS组件与AngularJS** - 本节讨论了如何将Ionic的CSS组件与...