详解Angular 4 表单快速入门
26 浏览量
2020-12-09
15:25:18
上传
评论
收藏 70KB PDF 举报
详解详解Angular 4 表单快速入门表单快速入门
基础知识基础知识
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: `
<input type="text" [(ngModel)]="username">
{{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: `
<input
type="text"
评论0
最新资源