angular6 表单验证

按照官网执行

npm install -g @angular/cli
ng new my-app

再执行

ng serve --open

报错

这是因为没有在my-app文件夹目录下执行，官网的指令是

自己执行命令时，少写了 cd my-app。

模板表单有三个指令：ngForm 、ngModelGroup和ngModel,都是来自FormsModule，因此要在app.module.ts中，

      1.导入 FormsModule。

       2.把 FormsModule 添加到 ngModule 装饰器的 imports 列表中，这样应用就能访问模板驱动表单的所有特性，包括 ngModel。

app.component.html的内容

<form #myForm = "ngForm" action="" (ngSubmit)="onSubmit(myForm.value)">

    <div> 用户名：<input #username = "ngModel" ngModel  type="text" name="username"></div>
    <div> 电话：<input ngModel type="number" name="mobile"></div>
     
    <div ngModelGroup = "passwordGroup">
      <div> 密码：<input ngModel  type="password" name="password"></div>
      <div>确认密码：<input ngModel type="password" name="pconfirm"></div> 
    </div>
    
    <div><button type="submit">注册</button></div>
</form>

app.component.ts中

onSubmit(value: any){
  console.log(value)
  }

响应式表单：

<form [formGroup]="registForm" (ngSubmit)="onSubmit()">
    <div>用户名<input type="text" placeholder="请输入用户名" formControlName="username" /></div>
    <div [hidden]="registForm.get('username').valid || registForm.get('username').untouched">
    	<p [hidden]="!registForm.hasError('required','username')">用户名是必填的</p>
    	<p [hidden]="!registForm.hasError('minlength','username')">用户名最小长度是6</p>
	</div>
    <div>手机号码:<input type="text" placeholder="请输入手机号码" formControlName="mobile"/></div>
    <div [hidden]="registForm.get('mobile').valid || registForm.get('mobile').pristine">
        <p [hidden]="!registForm.hasError('mobile', 'mobile')">{{registForm.getError('mobile', 'mobile')?.info}}</p>
    </div>

    <div formGroupName="passwordGroup">
        <div>密码:<input type="password" placeholder="请输入密码" formControlName="password" /></div>
        <div [hidden]="!registForm.hasError('minlength',['passwordGroup','password'])">密码最小长度是6 </div>
        <div>确认密码:<input type="password" placeholder="请再次输入密码" formControlName="pconfirm"/></div>
        <div [hidden]="!registForm.hasError('equal','passwordGroup') || this.registForm.get('passwordGroup').get('pconfirm').untouched || registForm.hasError('minlength',['passwordGroup','password'])">
			{{registForm.getError('equal', 'passwordGroup')?.info}}
        </div>
    </div>
    <div><input type="submit" value="注册" [disabled]="!registForm.valid" /></div>
</form>

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private registForm: FormGroup;

  mobileValidator(control: FormControl): any{

  	const mobileReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  	const result = mobileReg.test(control.value);
  	return result ? null : { mobile: { info: '请输入正确的手机号' } };
  }



  equalValidator(group: FormGroup): any {
   
    const password = group.get('password') as FormControl;
    const pconfirm = group.get('pconfirm') as FormControl;
    
    const isEqule: boolean = ( password.value === pconfirm.value);
    return isEqule ? null : { equal: { info: '两次密码不一致' } };
}

   constructor(private fb: FormBuilder) {
        this.registForm = this.fb.group({
            username: ['', [Validators.required, Validators.minLength(6)]],
            mobile: ['',this.mobileValidator],
            passwordGroup: this.fb.group({
                password: ['',Validators.minLength(6)],
                pconfirm: ['']
            },{validator: this.equalValidator})
        });
    }


    onSubmit(){
      console.log(this.registForm.get('username').valid)
      console.log(this.registForm.get('mobile').valid)
      console.log(this.registForm.get('passwordGroup').valid) 
       console.log(this.registForm.get('passwordGroup').get('pconfirm').valid) 
      if(this.registForm.valid){
        alert(1)
      }
    }
}