Angular 2创建表单
创建一个初始HTML表单模板，代码如下：
<div class = "container">
<h1>网站表单</h1>
<form>
<div class = "form-group">
<label for = "name">网站排名</label>
<input type = "text" class = "form-control" id = "name" required>
</div>
<div class = "form-group">
<label for = "alterEgo">alexa排名</label>
<input type = "text" class = "form-control" id = "alexa">
</div>
<button type = "submit" class = "btn btn-default">提交</button>
</form>
</div>required 属性设置的该字段为必须字段，如果没有设置则是可选。
显示效果如下：
使用ngModel进行双向数据绑定
接下来我们使用ngModel进行双向数据绑定，通过监听DOM事件来实现更新组件的属性。代码如下所示：
<div class="container">
<h1>网站表单</h1>
<form>
{{diagnotic}}
<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-cntrol" id="url" required
[(ngModel)]="model.url" name="url">
<option *ngFor = "let p of urls" [value]="p">{{p}}</option>
</sellect>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>- {{diagnostic}}只是用于测试时候输出数据使用
- 每一个input元素都有一个id属性，它被label元素的for属性用来把标签匹配到对应的input。
- 每一个input元素都有一个name属性，Angular的表单模块需要使用它为表单注册控制器。
运行以上事例输出结果如下：