`

ionic2 + cordova 应用-表单

阅读更多

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
分享到:
评论

相关推荐

    ionic+Angular+Cordova初学者文档

    "2 ionic项目简介以及Angularjs 基础.pdf"引导读者进入ionic世界,讲解了ionic框架的构建原理和它与AngularJS的紧密关系。AngularJS是一个强大的前端MVC框架,它的数据绑定和依赖注入等特性使得开发变得更加高效。...

    最全的ionic+cordova+angularjs安装指南

    在开发跨平台移动应用时,使用Ionic、Cordova和AngularJS结合可以发挥各自的优势。Ionic提供了一套丰富的UI组件和交互模式,使得开发者能够创建外观和体验一致的应用;Cordova则充当桥接角色,它使得开发者能够利用...

    cordova,ionic 例程

    Cordova主要负责将Web应用程序打包成原生应用,而Ionic则提供了丰富的UI组件和工具,用于构建具有现代感的移动应用界面。 **Cordova** Cordova是由Apache软件基金会开发的一款开源移动应用开发框架,它允许开发者...

    使用Ionic2制作移动应用

    ##### 第一课:生成一个Ionic2应用 - **启动Ionic CLI**:首先,安装Node.js,然后通过npm全局安装Ionic CLI (`npm install -g ionic`). - **创建新项目**:使用命令 `ionic start myAppName tabs --type=angular` ...

    EXPERT-Building-Mobile-Apps-with-Ionic-2

    - **创建页面、组件、指令、管道和服务**:这些是Angular的核心概念,也是Ionic 2应用程序的基础构建块。例如,页面代表了一个特定的视图,而组件则封装了视图及其相关行为。 #### 模板与样式 - **模板语法**:...

    Building Mobile Apps with Ionic 2 final2.0 (附项目源码)

    10. **发布与部署**:掌握将Ionic 2应用打包成iOS和Android应用的流程,以及如何通过App Store和Google Play发布应用。 通过《构建移动应用 with Ionic 2 final2.0》的学习,开发者不仅可以掌握Ionic 2框架的精髓,...

    ionic+phonegap 案例源码

    Ionic框架的核心特点包括使用AngularJS(现在是Angular)进行数据绑定和状态管理,使用Sass进行样式定义,以及提供了一套丰富的UI组件,如导航、滑动、表单等,用于构建具有原生外观和感觉的应用。此外,Ionic还...

    用Ionic2编写移动应用程序

    根据提供的文件信息,将生成关于使用Ionic2编写移动应用程序的知识点: 首先,Ionic2是一个用于构建移动应用的开源前端框架。通过使用Ionic2,开发者可以利用Web技术(如HTML、CSS和JavaScript)创建跨平台的移动...

    ionic-angularjs-kitchensink:使用 Ionic Framework + AngularJS 开发的简单厨房水槽应用程序

    使用 Cordova 构建原生打包应用程序 请参阅 Ionic-AngularJS-IntelXDK-Seed 项目以开始使用构建原生打包应用程序: 英特尔 XDK 将帮助您使用任何 HTML5 项目轻松构建适用于 iPhone/iPad、Android、Windows Phone 和...

    ionic支持库(包括命令行和插件)

    Ionic是一款流行的开源框架,用于构建高性能的混合移动应用。它基于Angular,并且使用Web技术如HTML、CSS和JavaScript。在本资源中,我们看到有两个压缩文件:`ionic.rar` 和 `ionic-cmd.rar`,它们可能包含了 Ionic...

    IONIC+PhoneGap项目源码

    1. **组件丰富**:IONIC提供了一系列可定制的UI组件,如导航栏、侧滑菜单、表单控件等,帮助开发者快速搭建应用界面。 2. **性能优化**:通过使用Web Components和CSS3动画,IONIC能够实现接近原生应用的性能。 3. *...

    Building-Mobile-Apps-with-Ionic-2

    - **准备步骤**:包括生成新的Ionic 2应用、创建必要的服务、添加所需的平台和Cordova插件等。 - **基本布局**:设置主页和清单页面的布局设计。 - **数据模型和Observable**:创建数据模型以存储列表项的信息,并...

    ionic4-angular7-example:Ionic 4,Angular 7和Cordova教程:构建CRUD移动应用

    本文将深入探讨如何使用Ionic 4、Angular 7和Cordova构建一个CRUD(创建、读取、更新、删除)移动应用。这个教程基于提供的"ionic4-angular7-example"源代码,适合对移动开发感兴趣并有一定前端技术基础的开发者。 ...

    使用ionic3ag4编写模仿京东商城的demo

    ionic cordova build android/ios # 构建对应平台的应用 ``` 总的来说,使用Ionic 3和Angular 4构建模仿京东商城的移动应用,不仅能够利用Web技术栈的优势,还能享受到跨平台开发的便利。通过合理的设计和编码实践...

    ionic入门教程

    - **核心组件**:Ionic 提供了一系列用于构建用户界面的核心组件,如按钮、表单元素、导航栏等。 - **示例代码**: - 按钮组件: ```html &lt;ion-button&gt;点击我&lt;/ion-button&gt; ``` - 导航栏组件: ```html &lt;ion-...

    ionic3官网demo-super

    它包括了登录注册、导航、表单、推送通知等多个常见的移动应用功能,有助于开发者快速理解和掌握 Ionic 的工作原理。 5. **移动应用开发**:Ionic3 提供了一套完整的工具链,包括 CLI(命令行界面)、模拟器和真机...

    ionic3官网demo-blank

    7. **移动设备API访问**:通过Cordova插件,Ionic应用可以访问手机的硬件功能,如相机、地理位置、通知等。 8. **状态管理和数据流**:可以集成Redux或RxJS来管理应用的状态,实现响应式编程。 9. **测试**:支持...

    ionic3官网demo-tutorial

    Ionic 3 提供了一套丰富的 UI 组件,如按钮、表单、滑块、选项卡等,这些组件都是基于 Web 元素的封装,设计风格与原生移动应用保持一致。开发者可以轻松地通过 HTML 属性和事件来控制组件的行为。 **导航和路由** ...

    Cordova 3.x 基础(10) -- UI框架Ionic Framework

    2. **创建基本结构**:介绍如何使用`ionic start`命令创建一个新的应用,以及理解应用的基本目录结构和文件。 3. **集成AngularJS**:由于Ionic是基于AngularJS的,博主可能阐述了如何在Cordova项目中集成Angular,...

    Learning Ionic中文版

    - Ionic提供了一系列预先设计好的CSS组件,如按钮、表单、列表等,这些组件不仅外观一致,而且易于使用,极大地提高了开发效率。 - **3.3 整合Ionic CSS组件与AngularJS** - 本节讨论了如何将Ionic的CSS组件与...

Global site tag (gtag.js) - Google Analytics