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的内容

    
 用户名：
    
 电话：
     
    

      
 密码：
      
确认密码：
 
    
    
    
注册

app.component.ts中

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

响应式表单：

    
用户名
    

    	
用户名是必填的
    	
用户名最小长度是6
	
    
手机号码:
    

        
{{registForm.getError('mobile', 'mobile')?.info}}
    

    

        
密码:
        
密码最小长度是6 
        
确认密码:
        

			{{registForm.getError('equal', 'passwordGroup')?.info}}
        
    
    

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)
      }
    }
}