基础知识
创新互联公司-专业网站定制、快速模板网站建设、高性价比海东网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式海东网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖海东地区。费用合理售后完善,10余年实体公司更值得信赖。
Angular CLI 基本使用
安装 Angular CLI (可选)
npm install -g @angular/cli
创建新的项目
ng new PROJECT-NAME
启动本地服务器
cd PROJECT-NAME ng serve
Angular Forms 简介
Angular 4 中有两种表单:
- Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )
- Reactive Forms - 响应式表单
本文主要介绍 Template Driven Forms (模板驱动式表单) 的基础知识,相关的知识点会以问答的形式进行介绍。
第一节 - 创建最简单的输入框
如何实现双向绑定?
在 Angular 表单中,我们通过 ngModel 指令来实现双向绑定。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` {{username}} `, }) export class AppComponent { username = 'semlinker'; }
第二节 - 添加简单的验证功能
如何为表单控件添加验证功能?
目前 Angular 支持的内建 validators 如下:
- required - 设置表单控件值是非空的
- email - 设置表单控件值的格式是 email
- minlength - 设置表单控件值的最小长度
- maxlength - 设置表单控件值的最大长度
- pattern - 设置表单控件的值需匹配 pattern 对应的模式
接下来我们来添加最简单的 必填 校验。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` {{username}} `, }) export class AppComponent { username = 'semlinker'; }
如何判断表单控件是否通过验证?
在 Angular 中,我们可以通过 #userName="ngModel"
方式获取 ngModel
对象,然后通过 userName.valid
判断表单控件是否通过验证。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` {{userName.valid}} `, }) export class AppComponent { username = 'semlinker'; }
第三节 - 显示验证失败的错误信息
如何显示验证失败的错误信息?
在 Angular 中,我们可以通过 #userName="ngModel"
方式获取 ngModel
对象,然后通过该对象的 errors
属性,来获取对应验证规则 (如 required, minlength 等) 的验证状态。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `
请您输入用户名用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为 {{userName.errors?.minlength.actualLength}}`, }) export class AppComponent { username = 'semlinker'; }
第四节 - 创建表单
如何使用表单?
在 Angular 中,我们可以使用熟悉的