Angular2.js实现表单验证详解

2024-09-27 16:29:52

表单创建一个有效、引人注目的数据输入体验。Angular表单协调一组数据绑定控件，跟踪变更。验证输入的有效性，并且显示错误信息。

接下来，主要内容有：

1、使用组件和模板构建Angular表单；

2、用ngModel创建数据绑定，以读取和写入输入控件的值。

构建Angular表单

我们想构建包含姓名，电话，特长三个字段的表单

1、我们可以参照快速启动那篇，创建一个名为forms的新项目，也可以使用之前的项目进行修改；

2、创建Person类；

3、创建控制此表单的组件；

4、创建具有初始表单布局的模板；

5、使用ngModel双向数据绑定语法把数据属性绑定到每个表单控件中。

创建Person类

在app文件夹下创建hero.ts文件，内容为

export class Person{
  constructor(
    public id:number,
    public name:string,
    public ownpower:string,
    public power?:string //可填可不填，可选的 ？不能省略
  ){}
}
//创建一个类，定义它的属性

TypeScript编译器为每个public构造函数参数生成一个公共字段，在创建一个新的Person实例时，自动把参数赋给这些公共字段。

创建表单组件

在app文件夹下创建hero-form-component.ts文件：

import { Component } from '@angular/core';
import {Person} from './hero'; //引入hero.ts中的Person类
@Component({
  moduleId:module.id,//属性设置了基地址，用于从相对路径加载form.html模板文件
  selector: 'hero-form',//在模板中创建添加<hero-form>标签
  templateUrl:'../form.html'//模板上增加form.html里面的内容
})
export class HeroFormComponent {
  powers=['唱歌','跳舞','弹琴','画画'];
  model=new Person(1,'小明','跳舞',this.powers[2]);//实例化
  submitted=false;
  onsubmit(){this.submitted=true;}
  get diagnostic(){return JSON.stringify(this.model);} //这个先暂时不管
}

1、这段代码导入了Angular核心库以及我们刚刚创建的Person模型；

2、@Component装饰器的选择器将<hero-form>标签把这个表单放进父模板；

3、moduleId:module.id属性设置了基地址，用于从相对模块路径加载templateUrl；

4、templateUrl属性指向一个独立的HTML模板文件，使用外联模板；

5、位model和powers提供了演示用的假数据；

6、在最后增加diagnostic属性，她返回这个模型的JSON形式。在开发过程中用于调试。

修改app.module.ts启动文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';//导入表单
import { AppComponent1 } from './app.component';
import{HeroFormComponent} from './hero-form.component';//导入新增加的组件类
//导入hero-form.component.ts中的HeroFormComponent
@NgModule({
imports: [
  BrowserModule,
  FormsModule //表单模板
],
declarations: [
  AppComponent1 ,
  HeroFormComponent //类名
],
bootstrap: [AppComponent1]
})
export class AppModule { }

1、导入FormsModule和新组件HeroFormComponent；

2、把FormModule添加到ngModel装饰器的imports列表中，这样应用就能访问模板驱动表单的所有特性，包括ngModel；

3、把HeroFormComponent添加到ngModule装饰器的declarations列表中，使HeroFormComponent组件在整个模块中可见。

修改app.component.ts文件

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',//在index.html中创建添加<my-app>标签
  //包裹<hero-form></hero-form>
  template:`<hero-form></hero-form>`
  //模板里面添加此标签（hero-form里面的内容）
})
export class AppComponent1{}

关于表单的组建模板构建完了。

创建初始HTML表单模板，上文提到的form.html文件

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>form表单</title>
</head>
<body>
<div class="container">
  <h1>个人信息</h1>
  <form>
    <div class="form-group">
      <label for="name">姓名</label>
      <input type="text" id="name" required class="form-control">
    </div>
    <div class="form-group">
      <label for="ownpower">特长</label>
      <input type="text" class="form-control" id="ownpower">
    </div>
    <div class="form-group">
      <label for="power">能力选择</label>
      <select class="form-control" id="power" required>
        <!--循环-->
        <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
      </select>
    </div>
    <button type="submit" class="btn btn-success">提交</button>
  </form>
</div>
</body>
</html>

我们可以使用css来美化表单，在index.html里面引入样式表文件

<!--样式表-->
  <link rel="stylesheet" href="css/bootstrap.min.css">

显示的效果为

使用ngModel进行双向数据绑定[(ngModel)]语法

修改form.html文件，拿姓名做个实例

<div class="form-group">
      <label for="name">姓名，显示为{{model.name}}</label>
      <input type="text" id="name" required class="form-control" [(ngModel)]="model.name" name="name" #name1="ngModel">
      <!--双向绑定:{{model.name}}-->
      <!--使用ngModwl进行双向绑定，其绑定了model.name，所以所有有model。name的都可以同时变化-->
    </div>

效果为

好了，一个简单的表单就做好了，下一篇讲控制表单，校验错误等内容。

参考：https://angular.cn/docs/ts/latest/guide/forms.html

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

AngularJS手动表单验证

所谓手动验证是通过AngularJS表单的属性来验证,而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm", 如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"> <head> <meta charset="
详解AngularJS实现表单验证

开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码代码如下: <<input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码代码如下: <<input type="tex
AngularJS自动表单验证

AngularJS的另外一种表单验证方式是自动验证,即通过directive来实现,除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module. 有关angular-auto-validate: 安装:npm i angular-auto-validate 引用:<script src="../node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js&qu
AngularJS中实现用户访问的身份认证和表单验证功能

身份验证权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们
AngularJS使用ngMessages进行表单验证

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="
详细解读AngularJS中的表单验证编程

需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交显示一个必填或者非法email格式的错误信息如果正确提交就弹出一个祝贺信息现在知道我们的目标了吧,让我们一起来构建这个东西吧. Angular 的表单属性 $valid, $invalid, $pristine, $dirty Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和
AngularJS使用angular-formly进行表单验证

当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: <some-form fiedls="vm.someFields" ...></some-form> 然后,在controller中定义各个字段以及验证.angular-formly就是为这个需求而存在. 在controller中,把各个字段定义在数组中: vm.rentalFields = [ { key:'first_name', type
AngularJs表单验证实例详解

常用的表单验证指令 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码代码如下: <input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码代码如下: <input type="text" ng-minlength="
详解AngularJS中的表单验证(推荐)

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证正则式验证只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?
AngularJS实现表单验证

虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始复制代码代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p&

Angular2.js实现表单验证详解

相关推荐

随机推荐