Angular2.js——表单(上)

表单创建一个有效、引人注目的数据输入体验。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

时间: 2024-10-10 02:50:47

Angular2.js——表单(上)的相关文章

node.js学习(2)--路由功能以及表单上传

今天按照<node.js入门>这本书学习了node的一些基础知识,包括服务器的创建,路由功能的实现,表单上传和数据处理,感觉开始明白了node.js的一些基本原理.这本书说的很详细也很基础,很适合初学者学习.node.js入门 众所周知,node跟php语言不一样,node不需要依赖于apache等服务器,因为node本身就能够构建服务器!所以,再用node开发网站之前我们首先得学会如何搭建服务器.关于node创建服务器在我之前的博客已经有介绍,这里不再赘述. 完成一个表单上传与数据处理的de

JS表单验证类HTML代码实例

以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮点数验证.日期验证.邮件检查.网址验证.固定电话和手机号码验证.IP地址验证.邮编和QQ号码验证. MSN和身份证验证等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

node.js表单——formidable/////z

node.js表单——formidable node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装package的路径分为两种,一种是本地目录,一种是全局目录. npm install xxx -g 命令将模块下载安装到全局目录中. 全局目录可以通过 npm config set prefix "目录路径" 来设置. 通过 npm config get prefix 来获取当前设置的目录. npm

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi

使用form表单上传文件

在使用form表单上传文件时候,input[type='file']是必然会用的,其中有一些小坑需要避免. 1.form的 enctype="multipart/form-data" 已经是个老生常谈的问题了,相信都能注意到,就不多说了. 2.上传下载的请求是不能用ajax提交返回json的. 3.当使用input[type='file'] 的onChange事件来触发文件上传的时候要注意当上传成功时清空input的时候,不能简单的使用$("input").val(

js表单验证 插件jQuery-Validation-Engine-master

做项目基本离不开表单验证,想要美观,简洁,不占内存,用户体验效果好 所以我推荐一款js表单验证 因为我觉得这个挺好的,所以分享下 文档 下面也有下载的压缩包 https://github.com/posabsolute/jQuery-Validation-Engine 昵称做了ajax验证判断输入的用户是否存在 会提示先等待的信息...(我这里设置的时候是2秒) 如果用户名存在 会显示红色的气泡 如果用户名可以使用 会显示绿色的汽泡 还可以改变消息框的位置 如果弹出多个消息框 可以从上到下逐个提

[转]html5表单上传控件Files API

表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:<input type="file" multiple> 只允许上传一个文件:<input  type="file" single> 2.上传指定的文件格式 <input type="file" accept="im

jq表单上传多文件 前后台代码

Html>>>>>>>>> <form id="Job_Notice_Form"  method="post" enctype="multipart/form-data"> <div id="f" > <div id="zhi"> <div style="display:none"> &