基础知识

Angular CLI 基本使用

安装 Angular CLI (可选)

npm install -g @angular/cli

创建新的项目

ng new PROJECT-NAME

启动本地服务器

cd PROJECT-NAME
ng serve

Angular Forms 简介

Angular 4 中有两种表单：

1. Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )
2. 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 如下：

1. required - 设置表单控件值是非空的
2. email - 设置表单控件值的格式是 email
3. minlength - 设置表单控件值的最小长度
4. maxlength - 设置表单控件值的最大长度
5. pattern - 设置表单控件的值需匹配 pattern 对应的模式

接下来我们来添加最简单的 必填 校验。

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <input 
   type="text" 
   required
   [(ngModel)]="username">
  {{username}}
 `,
})
export class AppComponent {
 username = 'semlinker';
}

如何判断表单控件是否通过验证？

在 Angular 中，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过 userName.valid 判断表单控件是否通过验证。

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <input 
   type="text" 
   required
   [(ngModel)]="username"
   #userName="ngModel">
  {{userName.valid}}
 `,
})
export class AppComponent {
 username = 'semlinker';
}

第三节 - 显示验证失败的错误信息

如何显示验证失败的错误信息？

在 Angular 中，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过该对象的 errors 属性，来获取对应验证规则 (如 required, minlength 等) 的验证状态。

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <input 
   type="text" 
   required
   minlength="3"
   [(ngModel)]="username"
   #userName="ngModel">
  <hr>
  <div *ngIf="userName.errors?.required">请您输入用户名</div>
  <div *ngIf="userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  </div>
 `,
})
export class AppComponent {
 username = 'semlinker';
}

第四节 - 创建表单

如何使用表单？

在 Angular 中，我们可以使用熟悉的 <form> 标签来创建表单。

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
 <form>
  <input 
   type="text" 
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  <hr>
  <div *ngIf="userName.errors?.required">请您输入用户名</div>
  <div *ngIf="userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  </div>
  <button type="submit">提交</button>
 </form>
 `,
})
export class AppComponent {
 username = 'semlinker';
}

需要注意的是，在使用 <form> 标签后，我们的 username 输入框，必须添加 name 属性。

如何获取表单提交的值？

在 Angular 中，我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象，然后通过 loginForm.value 来获取表单的值。

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
 <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  <input 
   type="text" 
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  <hr>
  <div *ngIf="userName.errors?.required">请您输入用户名</div>
  <div *ngIf="userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  </div>
  <button type="submit">提交</button>
  {{loginForm.value | json}}
 </form>
 `,
})
export class AppComponent {
 username = 'semlinker';

 onSubmit(value) {
  console.dir(value);
 }
}

第五节 - ngModelGroup简介

ngModelGroup 有什么作用？

ngModelGroup 指令是 Angular 表单中提供的另一特殊指令，可以对表单输入内容进行分组，方便我们在语义上区分不同性质的输入。例如联系人的信息包括姓名及住址，现在需对姓名和住址进行精细化信息收集，姓名可精细化成姓和名字，地址可精细化成城市、区、街等。

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
 <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  <fieldset ngModelGroup="user">
  <input 
   type="text" 
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  <hr>
  <div *ngIf="userName.errors?.required">请您输入用户名</div>
  <div *ngIf="userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  </div>
  <input type="password" ngModel name="password">
  </fieldset>
  <button type="submit">提交</button>
  <hr>
  {{loginForm.value | json}}
 </form>
 `,
})
export class AppComponent {
 username = 'semlinker';

 onSubmit(value) {
  console.dir(value);
 }
}

以上代码成功运行后，{{loginForm.value | json}} 的输出结果：

{ "user": { "username": "semlinker", "password": "123" } }

第六节 - 表单添加验证状态样式

如何为表单添加验证状态样式信息？

在 Angular 表单中，若验证通过则会在表单控件上添加 ng-valid 类，若验证失败则会在表单控件上添加 ng-invalid 类。

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 styles: [`
  input.ng-invalid {
    border: 3px solid red;
  }
  input.ng-valid {
    border: 3px solid green;
  }
 `
 ],
 template: `
 <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  <fieldset ngModelGroup="user">
  <input 
   type="text" 
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  <hr>
  <div *ngIf="userName.errors?.required">请您输入用户名</div>
  <div *ngIf="userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  </div>
  <input type="password" required ngModel name="password">
  </fieldset>
  <button type="submit">提交</button>
  <hr>
  {{loginForm.value | json}}
 </form>
 `,
})
export class AppComponent {
 username = 'semlinker';

 onSubmit(value) {
  console.dir(value);
 }
}

第七节 - 表单控件的状态

表单控件除了 valid 状态外，还包含哪些状态？

在 Angular 中表单控件有以下 6 种状态，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，进而获取控件的状态信息。具体状态如下：

1. valid - 表单控件有效
2. invalid - 表单控件无效
3. pristine - 表单控件值未改变
4. dirty - 表单控件值已改变
5. touched - 表单控件已被访问过
6. untouched - 表单控件未被访问过

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 styles: [`
  input.ng-invalid {
    border: 3px solid red;
  }
  input.ng-valid {
    border: 3px solid green;
  }
 `
 ],
 template: `
 <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  <fieldset ngModelGroup="user">
  <input 
   type="text" 
   required
   minlength="3"
   name="username"
   [(ngModel)]="username"
   #userName="ngModel">
  <hr>
  <p>Name控件的valid状态：{{userName.valid}} - 表示控件有效</p>
  <p>Name控件的invalid状态：{{userName.invalid}} - 表示控件无效</p>
  <p>Name控件的pristine状态：{{userName.pristine}} - 表示控件值未改变</p>
  <p>Name控件的dirty状态：{{userName.dirty}} - 表示控件值已改变</p>
  <p>Name控件的touched状态：{{userName.touched}} - 表示控件已被访问过</p>
  <p>Name控件的untouched状态：{{userName.untouched}} - 表示控件未被访问过</p>
  <div *ngIf="userName.errors?.required">请您输入用户名</div>
  <div *ngIf="userName.errors?.minlength">
   用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
    {{userName.errors?.minlength.actualLength}}
  </div>
  <input type="password" required ngModel name="password">
  </fieldset>
  <button type="submit">提交</button>
  <hr>
  {{loginForm.value | json}}
 </form>
 `,
})
export class AppComponent {
 username = 'semlinker';

 onSubmit(value) {
  console.dir(value);
 }
}

第八节 - 使用单选控件

如何添加单选控件？

在 Angular 中，我们通过 <input name="***" type="radio"> 方式添加单选控件。

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
 <form #loginForm="ngForm">
  Angular版本：
  <div *ngFor="let version of versions;">
    <input 
     [attr.id]="version"
      name="version"
      ngModel
      required
      [value]="version"
      type="radio">
     <label [attr.for]="version">{{version}}</label>
   </div>
  <hr>
  {{loginForm.value | json}}
 </form>
 `,
})
export class AppComponent {
 versions = ['1.x', '2.x', '3.x'];
}

第九节 - 使用多选控件

如何添加多选控件？

在 Angular 中，我们通过 <select name="***"> 方式添加多选控件。

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
 <form #loginForm="ngForm">
  Angular版本：
  <select name="version" [ngModel]="versions[0]">
     <option
      *ngFor="let version of versions;"
      [value]="version">
       {{version}}
    </option>
   </select>
  <hr>
  {{loginForm.value | json}}
 </form>
 `,
})
export class AppComponent {
 versions = ['1.x', '2.x', '3.x'];
}

如何添加必填验证？

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 styles: [`
  select.ng-invalid + label:after {
   content: '<-- 请选择版本!'
  }
 `
 ],
 template: `
 <form #loginForm="ngForm">
  Angular版本：
  <div>
   <select name="version" [ngModel]="version" required>
    <option
    *ngFor="let version of versions;"
     [value]="version">
     {{version}}
    </option>
   </select>
   <label></label>
  </div>
  <hr>
  {{loginForm.value | json}}
 </form>
 `,
})
export class AppComponent {
 versions = ['','1.x', '2.x', '3.x'];
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Angular  # 4表单  # 4表单入门  # angular4中关于表单的校验示例  # Angular4表单验证代码详解  # Angular4实现动态添加删除表单输入框功能  # AngularJS实现表单验证  # AngularJS表单编辑提交功能实例  # angular实现表单验证及提交功能  # AngularJS的表单使用详解  # Angular 4.x 动态创建表单实例  # Angular 4.x中表单Reactive Forms详解  # 详细解读AngularJS中的表单验证编程  # Angular4编程之表单响应功能示例  # 表单  # 请您  # 输入用户名  # 长度为  # 我们可以  # 多选  # 单选  # 已被  # 最简单  # 错误信息  # 则会  # 绑定  # 何为  # 必填  # 未被  # 输入框  # 的是  # 有什么  # 两种  # 中有 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 桂林网站制作公司有哪些,桂林马拉松怎么报名？  如何获取PHP WAP自助建站系统源码？  Laravel如何编写单元测试和功能测试？（PHPUnit示例）  php 三元运算符实例详细介绍  香港服务器如何优化才能显著提升网站加载速度？  Linux安全能力提升路径_长期防护思维说明【指导】  PHP正则匹配日期和时间(时间戳转换)的实例代码  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Laravel如何使用查询构建器？（Query Builder高级用法）  Android自定义listview布局实现上拉加载下拉刷新功能  如何用西部建站助手快速创建专业网站？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  微信小程序 canvas开发实例及注意事项  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  Internet Explorer官网直接进入 IE浏览器在线体验版网址  Laravel如何优化应用性能？（缓存和优化命令）  制作公司内部网站有哪些,内网如何建网站？  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  如何确保西部建站助手FTP传输的安全性？  南京网站制作费用,南京远驱官方网站？  手机网站制作与建设方案,手机网站如何建设？  奇安信“盘古石”团队突破 iOS 26.1 提权  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  微信小程序 闭包写法详细介绍  历史网站制作软件,华为如何找回被删除的网站？  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  高防服务器租用如何选择配置与防御等级？  如何在服务器上配置二级域名建站？  详解Huffman编码算法之Java实现  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  中国移动官方网站首页入口 中国移动官网网页登录  中山网站制作网页,中山新生登记系统登记流程？  php打包exe后无法访问网络共享_共享权限设置方法【教程】  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  js实现点击每个li节点，都弹出其文本值及修改  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  如何在建站主机中优化服务器配置？  Java解压缩zip - 解压缩多个文件或文件夹实例  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  Laravel如何保护应用免受CSRF攻击？（原理和示例）  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】