表单创建一个有效、引人注目的数据输入体验。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',//在中创建添加<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来美化表单，在里面引入样式表文件
<!--样式表--> <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>
效果为
好了，一个简单的表单就做好了，下一篇讲控制表单，校验错误等内容。
参考：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论