Angular2 表单form

---

angular2的表单主要用到了ngForm，ngModel，ngSubmit

ngSubmit对应的函数是我们提交表单调用的函数

angular2通过ngForm将按钮的禁用/启用状态和表单的有效性关联起来

#loginForm、#username和#userpwd都是angular2中的模板引用变量；

#username和#userpwd可以监控input输入框的状态，#loginForm可以用来监控表单的状态，通过这些状态可以进行输入错误提示以及表单提交控制。

HTML控件（比如input、select等）的状态主要包括：

pristine和dirty：控件是否使用过，或者理解成是否输入过内容

invalid和valid：控件输入是否有效

touched和untouched：控件是否已经被访问过

loginForm.form.valid用来判断form表单中的控件是否全部有效，

<form #loginForm="ngForm" (ngSubmit)="login(user)">
    <div class="form-group">
        <span>姓名</span>
        <input type="text" name="username" #username="ngModel" [(ngModel)]="user.name" required pattern="^[a-zA-Z][a-zA-Z0-9]*"  minlength="6" maxlength="16"/>
        <span *ngIf="!username.pristine&&username.invalid||username.touched&&username.invalid">用户名由英文字母和数字组成的6-16位字符,以字母开头</span>
    </div>
    <div class="form-group">
        <span>密码</span>
        <input type="password" name="userpwd" #userpwd="ngModel" [(ngModel)]="user.pwd" required minlength="6"/>
        <span *ngIf="!userpwd.pristine&&userpwd.invalid||userpwd.touched&&userpwd.invalid">密码至少6个字符</span>
    </div>
    <button type="submit"  [disabled]="!loginForm.form.valid">登陆</button>
</form>

在表单中需要注意的事项

1.在ng2表单中使用ngModel需要注意,必须带有name属性或者使用 [ngModelOptions]=”{standalone: true}”，二选其一

<form #testform="ngform">
    <input name="username" [(ngModel)]=user.name />
</form> 

<form #testform="ngform">
    <input [ngModelOptions]="{standalone: true}" [(ngModel)]=user.name />
</form>

如果未设置name或者ngModelOptions，就会报如下错误：

If ngModel is used within a form tag, either the name attribute must be set or the formcontrol must be defined as ‘standalone’ in ngModelOptions.

因为ngForm持有通过ngModel指令和name属性为各个元素创建的那些控件，并且监视它们的属性变化，包括有效性。 它还有自己的valid属性，只有当其中所有控件都有效时，它才有效。

2.使用button时需要注明type类型,未注明类型的button会默认为submit，当你点击一个非提交表单按钮时也会提交表单，所以要注明type=”button”