首页 / ANGULAR / 详解Angular 4 表单快速入门

详解Angular 4 表单快速入门

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解Angular 4 表单快速入门，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8970字，纯文字阅读大概需要13分钟。

内容图文

基础知识

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" 
   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 对象，进而获取控件的状态信息。具体状态如下：

valid - 表单控件有效
invalid - 表单控件无效
pristine - 表单控件值未改变
dirty - 表单控件值已改变
touched - 表单控件已被访问过
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 表单快速入门全部内容，希望文章能够帮你解决详解Angular 4 表单快速入门所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/343333.html

来源：【匿名】

【上一篇】详解angularJs中关于ng-class的三种使用方式说明【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【详解Angular 4 表单快速入门】教程文章相关的互联网学习教程文章

AngularJS快速入门指南10：DOM节点【代码】【图】

AngularJS通过指令将application数据绑定到HTML DOM元素的属性上。ng-disabled指令　　ng-disabled指令将AngularJS application数据绑定到HTML元素的disabled属性上。<div ng-app=""><p><button ng-disabled="mySwitch">Click Me!</button></p><p><input type="checkbox" ng-model="mySwitch">Button </p></div>运行代码解释：　　ng-disabled指令将application数据mySwitch绑定到HTML button的disabled属性上。　　ng-model指令将...

Angularjs快速入门（四）-css类和样式【代码】【图】

例子：1.error{background-color:red;} 23.warning{background-color:yellow;}View Code 1<div ng-controller=‘HeaderController‘> 2<div ng-class=‘{error:isError,warning:isWarning}‘>{{messageText}}</div> 3<button ng-click=‘showError()‘>展示error</button> 4<button ng-click=‘showWarning()‘>展示warning</button> 5</div> 6 7function HeaderController($scope){8 $scope.isError= false;9 $scope.isWarning ...

AngularJS 快速入门

AngularJS 快速入门示例代码： * 建立一个空页面* 扩充成为最简单的angularjs页面 * 修改页面标题 * 加入ng的库 * 定义项目app的名称， * 必须是按照 MVC模式的要求，建立基本框架，分别定义项目所需要Model， View， Control： *** 数据模块： DataService.js *** controller模块: demoController.js *** 改造DOM模板为NG风格的: index.html* 如何把数据显示到页面上在页面上显示商品的名称，价格和数量：海尔电视...

Angular5快速入门开发，告别Angular.js,Angular2,Anuglar4【图】

本篇文章主要的向大家介绍了关于angularjs5快速入门的内容，让大家快速的熟悉新的知识，而不是在老的版本中写代码。下面就让我们一起来看这篇文章吧一、概述尽管被称为Angular5，实际上它只是这个诞生于2012年的前端框架的的第四个版本：看起来差不多半年就发布一个新版本，不过实际上从重写的版本2开始，开发接口与核心思想就稳定下来了，并基本保持着与前序版本的兼容性。在5这个新的版本中，Angular团队将改进重点放在以下特性方...

Angular5快速入门示例分享【图】

大家对Angular 5了解多少呢？本文主要介绍了简述Angular 5 快速入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。一、概述尽管被称为Angular5，实际上它只是这个诞生于2012年的前端框架的的第四个版本：angular history看起来差不多半年就发布一个新版本，不过实际上从重写的版本2开始，开发接口与核心思想就稳定下来了，并基本保持着与前序版本的兼容性。在5这个新的版本中...

AngularJS快速入门_AngularJS

怎么样快速了解AngularJS？相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引。其实AngularJS的官方网站首页的几个例子已经很好的展示了AngularJS的一些特性，下面我就从几个例子一步一步的讲解Ang...

简述Angular 5 快速入门【图】

一、概述尽管被称为Angular5，实际上它只是这个诞生于2012年的前端框架的的第四个版本：angular history 看起来差不多半年就发布一个新版本，不过实际上从重写的版本2开始，开发接口与核心思想就稳定下来了，并基本保持着与前序版本的兼容性。在5这个新的版本中，Angular团队将改进重点放在以下特性方面：更易于构建渐进式Web应用 —— __P__rogressive __W__eb __A__pp使用构建优化器剔除无用代码，以获得更小的应用、更快的网...

详解Angular 4 表单快速入门

基础知识Angular CLI 基本使用安装 Angular CLI (可选)npm install -g @angular/cli创建新的项目ng new PROJECT-NAME启动本地服务器cd PROJECT-NAME ng serveAngular Forms 简介Angular 4 中有两种表单： Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )Reactive Forms - 响应式表单本文主要介绍 Template Driven Forms (模板驱动式表单) 的基础知识，相关的知识点会以问答的形式进行介绍。第一节 - 创...

Angular 4.x 路由快速入门学习

路由是 Angular 应用程序的核心，它加载与所请求路由相关联的组件，以及获取特定路由的相关数据。这允许我们通过控制不同的路由，获取不同的数据，从而渲染不同的页面。接下来我们将按照以下目录的内容，介绍 Angular 的路由。具体目录如下：目录 Installing the routerBase hrefUsing the routerRouterModule.forRootRouterModule.forChildConfiguring a routeDisplaying routesFuther configurationDynamic routesChild routes...

AngularJS快速入门

javascript-无法在我的angular-2快速入门应用程序中加载ng2-fullpage【代码】

我正在尝试使用整页angular2：我以某种方式无法加载要使用的ng2-fullpage软件包,以下是我的文件： systemjs.config.js(function (global) {System.config({paths: {// paths serve as alias'npm:': 'node_modules/'},// map tells the System loader where to look for thingsmap: {// our app is within the app folderapp: 'app',// angular bundles'@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common...

ANGULAR - 技术教程分类

Angular 2 教程 Angular 2 架构 Angular 2 数据显示 Angular 2 用户输入 Angular 2 表单 Angular 2 模板语法 angular 全部

ANGULAR - 最热教程

在Angular中如何实现查询天气预报 AngularJS服务service用法总结 Angular.JS中指令ng-if的注意事项小结 AngularJS 异步解决实现方法使用AngularJS和PHP的Laravel实现单页评...AngularJS控制器继承自另一控制器 spring+angular实现导出excel的实现代码关于AngularJS中ng-repeat不更新视图的...在Angular5中如何调用第三方js插件（详...Angular入口组件与声明式组件使用详解

首页 / ANGULAR / 详解Angular 4 表单快速入门

详解Angular 4 表单快速入门

内容导读

内容图文

内容总结

内容备注

内容手机端

【详解Angular 4 表单快速入门】教程文章相关的互联网学习教程文章

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程