AngularJS 2 基础教程Angular 2 JavaScript 环境配置Angular 2 TypeScript 环境配置Angular 2 架构Angular 2 架构 - 模块Angular 2 架构 - 组件Angular 2 构架 - 模板Angular 2 构架 - 元数据(Metadata)Angular 2 构架 - 数据绑定Angular 2 构架 - 指令(Directives)Angular 2 构架 - 服务(Services)Angular 2 构架 - 依赖注入Angular 2 数据显示Angular 2 数据显示 - 插值法Angular 2 数据显示 - ngForAngular 2 数据显示 - NgIfAngular 2 用户输入 - 绑定事件Angular 2 用户输入 - $event 对象Angular 2 用户输入 - 模板变量Angular 2 用户输入 - 按键事件过滤Angular 2 表单Angular 2 表单模型绑定Angular 2 表单数据验证Angular 2 提交表单Angular 2 模板语法
Angular 2 表单模型绑定
上一章节中我们已经学习了如何用组件和模板构建一个 angular 表单
但这个表单还没有和我们的模型进行绑定，本章我们就来完善这些功能
我们使用 ngModel 进行双向数据绑定，通过监听 dom 事件，来实现更新组件的属性
修改 app/site-form.component.html ,使用 ngModel 把我们的表单绑定到模型
<div class="container">
<h1>网站表单</h1>
<form>
{{diagnostic}}
<div class="form-group">
<label for="name">网站名</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name">
</div>
<div class="form-group">
<label for="alexa">alexa 排名</label>
<input type="text" class="form-control" id="alexa"
[(ngModel)]="model.alexa" name="alexa">
</div>
<div class="form-group">
<label for="url">网站 URL </label>
<select class="form-control" id="url"
required
[(ngModel)]="model.url" name="url">
<option *ngFor="let p of urls" [value]="p">{{p}}</option>
</select>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
上面的代码中
每一个 input 元素都有一个 id 属性，它被 label 元素的 for 属性用来把标签匹配到对应的 input
每一个 input 元素都有一个 name 属性， Angular 的表单模块需要使用它为表单注册控制器
{{diagnostic}} 只是用于测试时候输出数据使用
刷新浏览器，我们可以看到如下输出内容。