当前位置：首页 > 资讯 > 技术文档

详解Angular 4 表单快速入门

时间：2021-10-30 03:15 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解Angular 4 表单快速入门

[b]基础知识[/b] [b]Angular CLI 基本使用[/b] 安装 Angular CLI (可选)

npm install -g @angular/cli

创建新的项目

ng new PROJECT-NAME

启动本地服务器

cd PROJECT-NAME
ng serve

[b]Angular Forms 简介 [/b] [b]Angular 4 中有两种表单：[/b] [list=1] [*]Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )[/*] [*]Reactive Forms - 响应式表单[/*] [/list] 本文主要介绍 Template Driven Forms (模板驱动式表单) 的基础知识，相关的知识点会以问答的形式进行介绍。 [b]第一节 - 创建最简单的输入框[/b] 如何实现双向绑定？在 Angular 表单中，我们通过 ngModel 指令来实现双向绑定。

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

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

[b]第二节 - 添加简单的验证功能[/b] 如何为表单控件添加验证功能？目前 Angular 支持的内建 validators 如下： [list=1] [*]required - 设置表单控件值是非空的[/*] [*]email - 设置表单控件值的格式是 email[/*] [*]minlength - 设置表单控件值的最小长度[/*] [*]maxlength - 设置表单控件值的最大长度[/*] [*]pattern - 设置表单控件的值需匹配 pattern 对应的模式[/*] [/list] 接下来我们来添加最简单的必填校验。

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

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

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

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

[b]第三节 - 显示验证失败的错误信息 [/b] 如何显示验证失败的错误信息？在 Angular 中，我们可以通过[code] #userName="ngModel" [/code]方式获取 [code]ngModel [/code]对象，然后通过该对象的 [code]errors [/code]属性，来获取对应验证规则 (如 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';
}

[b]第四节 - 创建表单[/b] 如何使用表单？在 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';
}

需要注意的是，在使用 [code]<form> [/code]标签后，我们的 [code]username [/code]输入框，必须添加 [code]name [/code]属性。如何获取表单提交的值？在 Angular 中，我们可以通过[code] #loginForm="ngForm" [/code]方式获取 [code]ngForm [/code]对象，然后通过[code] loginForm.value [/code]来获取表单的值。

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);
 }
}

[b]第五节 - ngModelGroup简介[/b] ngModelGroup 有什么作用？ [url=https://angular.io/docs/ts/latest/api/forms/index/NgModelGroup-directive.html]ngModelGroup [/url]指令是 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);
 }
}

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

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

[b]第六节 - 表单添加验证状态样式 [/b] 如何为表单添加验证状态样式信息？在 Angular 表单中，若验证通过则会在表单控件上添加[code] ng-valid [/code]类，若验证失败则会在表单控件上添加 [code]ng-invalid [/code]类。

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);
 }
}

[b]第七节 - 表单控件的状态[/b] 表单控件除了 [code]valid [/code]状态外，还包含哪些状态？在 Angular 中表单控件有以下 6 种状态，我们可以通过 [code]#userName="ngModel" [/code]方式获取 [code]ngModel [/code]对象，进而获取控件的状态信息。具体状态如下： [list=1] [*]valid - 表单控件有效[/*] [*]invalid - 表单控件无效[/*] [*]pristine - 表单控件值未改变[/*] [*]dirty - 表单控件值已改变[/*] [*]touched - 表单控件已被访问过[/*] [*]untouched - 表单控件未被访问过[/*] [/list]

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);
 }
}

[b]第八节 - 使用单选控件[/b] 如何添加单选控件？在 Angular 中，我们通过 [code]<input name="***" type="radio"> [/code]方式添加单选控件。

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

[b]第九节 - 使用多选控件[/b] 如何添加多选控件？在 Angular 中，我们通过 [code]<select name="***"> [/code]方式添加多选控件。

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

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

全部评论(0)

上一篇：Angularjs渲染的 using 指令的星级评分系统示例
下一篇：简述AngularJS相关的一些编程思想

资讯排行榜
更多>>