【前言】：

在最近的项目中，对angular的学习也才算是开始入门。对于angular小白的我来说，每次遇到问题都是很好的成长机会，哪怕很小，(#^.^#)。不断的在错误中成长吧。

【错误】：

ERROR Error: If ngModel is used within a form tag,either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.
 
      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

【分析】：

要能有很好的耐心看错误提示很重要，每一个错误的解决方案也往往就在错误提示中隐藏甚至是“暴露”着。O(∩_∩)O哈哈~

上面的异常信息告诉我们如果再表单标签中使用ngModel，则必须设置name属性，或者在ngModelOptions中必须将表单控件定义为“standalone”。
因为ngForm持有通过ngModel指令和name属性为各个元素创建的那些控件，并且监视他们的属性变化，包括有效性。它还有自己的valid属性，只当其中的所有控件都有效时，它才有效。

【理论】：

angular2的表单主要用到了ngForm，ngModel，ngSubmit。ngSubmit对应的函数是我们提交表单调用的函数。angular2通过ngForm将按钮的禁用/启用状态和表单的有效性关联起。
#loginForm、#username和#userpwd都是angular2中的模板引用变量；
#username和#userpwd可以监控input输入框的状态，#loginForm可以用来监控表单的状态，通过这些状态可以进行输入错误提示以及表单提交控制。
HTML控件（比如input、select等）的状态主要包括：
pristine和dirty：控件是否使用过，或者理解成是否输入过内容
invalid和valid：控件输入是否有效
touched和untouched：控件是否已经被访问过。

【实战】：

<div class="modal-body">
<form role="form" class="form-horizontal" #validationForm1="ngForm">
<div class="form-group">
<div class="col-sm-6 form-inline">
<label class="control-label">姓名：</label>
<label>
<input type="text" id="familyMemName" class="form-control" [(ngModel)]="homeInfo.familyMemName" name="familyMemName" ngModel
#familyMemName="ngModel" required>
</label>
</div>
<div class="col-sm-6 form-inline">
<label class="control-label">关系：</label>
<label>
<select class="form-control sel-width" [(ngModel)]="homeInfo.relationshipId" name="relationshipId" required>
<option *ngFor="let option of relationOptions" [value]="option.id">{{option.dictName}}</option>
</select>
</label> 
</div>
</div>
    ……
</div>
</form>
</div>
 
<div class="modal-footer">
<!-- [disabled]="!addform.form.valid" -->
<button type="button" class="btn btn-primary" [disabled]="!validationForm1.form.valid" (click)="add(addModal)">
添加
</button>
<button type="button" class="btn btn-default" (click)="close(addModal)">
取消
</button>
</div>

【总结】：

validationForm1.form.valid用来判断form表单中的控件是否全部有效。在ng2表单中使用ngModel必须带name属性或者使用[ngModelOptions]=”{standalone: true}”。否则会报上面的错误。