详解Angular 4 表单快速入门

程序员文章站 2022-07-05 20:27:22

基础知识 angular cli 基本使用安装 angular cli (可选) npm install -g @angular/cli...

基础知识

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'];
}

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

上一篇：详解nodeJS之二进制buffer对象

下一篇：基于Oracle闪回详解(必看篇)

详解Angular 4 表单快速入门

.Net Core 3.0 IdentityServer4 快速入门

Python 数值区间处理_对interval 库的快速入门详解

对angular4子路由&辅助路由详解

Angular4.x Event (DOM事件和自定义事件详解)

新手快速上手webpack4打包工具的使用详解

详解Vue.js——60分钟组件快速入门（上篇）

Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解

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

详解Angular 4.x Injector