表单
- 在
app.module.ts
里导入FormsModule
。 - 在
form
中添加表单名,代表整个表单。如:#loginForm="ngForm"
。 - 输入框必须绑定
[(ngModel)]=
,且必须有name
,如果需要进行表单验证,则需要#username="ngModel"
,则username
就代表了该输入框,可以利用输入框自带的属性为该表单做验证。 ngSubit=function(){}
,设置提交函数。
<form #loginForm="ngForm" (ngSubmit)="submitLoginForm(loginForm,username,password);">
<div *ngIf="username.errors">
<div *ngIf="username.errors.required&&username.dirty">
<i></i>用户名不能为空
</div>
</div>
<label>账号</label> <br/>
<input #username="ngModel" name="email" [(ngModel)]="user.login" required/>
<label>密码</label> <br/>
<input name="password" #password="ngModel" type="password" placeholder="请输入密码" required [(ngModel)]="user.password"/>
<button >登录</button>
</form>