Angular之表单验证

1.基本思想

通过ngModel跟踪修改状态与有效值验证

2.必须遵守

O元素要有name属性
O通过ngModel进行双向绑定(要绑定到ts文件中的变量)
O如果要显示他的状态、需要给表单定义一个模板变量(#name)
O通过模板变量的className属性显示

3.可以通过样式进行表单验证

控件别访问过： ng-touched ng-untouched
控件的值变化： ng-dirty ng-pristine
控件的值有效： ng-valid ng-invalid

<div class="row" style="height:350px">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-7">
<!--接管表单-->
<form #loginForm="ngForm">
  <div class="form-group">
    <label for="inputEmail1">Email address</label>
    <input type="email" class="form-control" name="email" id="inputEmail1" [(ngModel)]="login_email" placeholder="Email" #myEmail required>
  </div>
  <div class="form-group">
    <div [hidden]="myEmail.valid || myEmail.pristine" class="alert alert-danger" >
      Name is required
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword1">Password</label>
    <input type="password" class="form-control" name="password" id="inputPassword1" [(ngModel)]="login_password" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" id="chk_rem"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>

---

 .ng-valid[required]{
 border-left:5px solid greenyellow;
 }
.ng-invalid[required]{
 border-left:5px solid red;
 }
 /*排除表单*/
 /*.ng-invalid[required]:not(form){*/
/*border-left:5px solid blue;*/
/*}*/

image.png image.png

4.步骤

五个：在app.module.ts中加入FormsModule
准备表单，让ngForm接管表单
表单上添加 ngModel双向绑定跟name属性 （模板变量与ngModel）
pattern正则验证
加警示div

5.代码
登录

<div class="container">
<div class="row" style="height: 200px"></div>
<div class="row">
<div class="col-md-5">
  <app-regist></app-regist>
</div>
<div class="col-md-7">
  <form #loginForm="ngForm">
    <div class="form-group">
      <label for="inputEmail">Email address</label>
      <input type="email" class="form-control" name="email" id="inputEmail"
             [(ngModel)]="login_email" placeholder="Email" #myEmail="ngModel"
             pattern="^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+(\.[a-zA-Z]{2,3})+$" required>
    </div>

    <div class="form-group">
      <div [hidden]="myEmail.valid || myEmail.pristine"
           class="alert alert-danger">
        Email 格式不正确
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword">Password</label>
      <input type="password" class="form-control" name="password" id="inputPassword" [(ngModel)]="login_password" placeholder="Password">
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <button type="button" class="btn btn-default">Submit</button>
  </form>

</div>
</div>
</div>

---

注册

   <div class="row">
  <div class="col-md-12">
  <form #myRegistForm="ngForm">
  <div class="form-group">
    <label for="inputRegistEmail">Email address</label>
    <input type="email" class="form-control" id="inputRegistEmail" name="email" [(ngModel)]="regist_email" placeholder="Email"
           pattern="^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+(\.[a-zA-Z]{2,3})+$"
           #registEmail="ngModel" required>
  </div>

  <div class="form-group">
    <div [hidden]="registEmail.valid || registEmail.pristine"
         class="alert alert-danger">
      Email 格式不正确
    </div>
  </div>

  <div class="form-group">
    <label for="inputRegistPassword">Password</label>
    <input type="password" class="form-control" id="inputRegistPassword" name="password" [(ngModel)]="regist_password" placeholder="Password"
           pattern="^\d{6,}$" #registPassword="ngModel" required>
  </div>

  <div class="form-group">
    <div [hidden]="registPassword.valid || registPassword.pristine"
         class="alert alert-danger">
      Password 格式不正确
    </div>
  </div>
  <div class="form-group">
    <label for="inputPasswordComfirm">Password Confirm</label>
    <input type="password" class="form-control" id="inputPasswordComfirm" name="password_confirm" [(ngModel)]="regist_password_confirm"
           placeholder="Password" #registPasswordComfirm="ngModel" required>
  </div>

  <div class="form-group">
    <div [hidden]="registPasswordComfirm.pristine || regist_password==regist_password_confirm"
         class="alert alert-danger">
      两次密码不一致
    </div>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="button" class="btn btn-default" (click)="regist(myRegistForm)" [disabled]="!(myRegistForm.form.valid &&regist_password==regist_password_confirm)">Submit</button>
</form>
</div>
</div>

---

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { PositionsAllComponent } from './position/positions-all/positions-all.component';
import { PositionsSelectorComponent } from './position/positions-selector/positions-selector.component';
import { PositionDetailComponent } from './position/position-detail/position-detail.component';
import { MyStyleDirective } from './directives/my-style.directive';
import { StringPipePipe } from './pipes/string-pipe.pipe';
import { SearchPipe } from './pipes/search.pipe';
import { LoginComponent } from './person-center/login/login.component';
import { RegistComponent } from './person-center/regist/regist.component';
import { IndexComponent } from './index/index.component';

@NgModule({
declarations: [
AppComponent,
PositionsAllComponent,
PositionsSelectorComponent,
PositionDetailComponent,
MyStyleDirective,
StringPipePipe,
SearchPipe,
LoginComponent,
RegistComponent,
IndexComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [LoginComponent]
})
export class AppModule { }