Angular 从零开始 4- form表单验证

一. 表单简介
/*

所有的表单元素需要加上name属性

		如果要验证怎么办？
	 */

二 模版驱动型表单 & 表单校验
// 支持双向数据绑定、变更检测、验证和错误处理

步骤：
	1. novalidate 禁用浏览器默认验证
	2. 引入 FormsModule
	3. #anyName= "ngForm" (使用 # 把表单指令对象导出到 anyName这个可引用变量中)
		NgForm指令:Angular会在<form>标签上自动创建并附加一个NgForm指令。它会控制那些带有ngModel指令和name属性的元素，监听他们的属性（包括其有效性）。

		 可以做以下效果:
		 给某个设置required
		 // <button type="submit" [disabled]="anyName.invalid" (click)="handle(anyName.value)">Sign up</button>

	4. 给每个表单元素设置FormControl    #name="ngModel"
		/*
			<div [hidden]="name.valid || name.pristine"
			     class="alert alert-danger">
			  Name is required
			</div>
		 */
		状态字段如下:
		 name.touched 控件被访问过。
		 name.untouched 控件未被访问过。
		 name.dirty 控件的值变化了。
		 name.pristine 控件的值未变化。
		 name.valid 控件的值有效
		 name.invalid 控件的值无效

		 name.errors 错误信息  {{name.errors | json}}


		 /*
		 		一个demo

		 		<form novalidate #anyName="ngForm">
				  <input id="name" name="name" class="form-control"
				         required minlength="4" pattern="[a-z]{6,}"
				         [(ngModel)]="hero.name" #name="ngModel" >
				  <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
				    <div *ngIf="name.errors.required">
				      Name is required.
				    </div>
				    <div *ngIf="name.errors.minlength">
				      Name must be at least 4 characters long.
				    </div>
				     <div *ngIf="name.errors.pattern">
				      pattern not match

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

		  */

三 响应式表单 & 表单校验

步骤：
	1. novalidate 禁用浏览器默认验证
	2. import {ReactiveFormsModule} from "@angular/forms";
	   引入 ReactiveFormsModule
	3  区别

	   (1)表单多了一个指令 [formGroup]="user"
	   (2)去掉了对表单的引用 #f="ngForm"
       (3)每个控件多了一个 formControlName
	   (4)每个控件也去掉了验证条件，比如 required、minlength 等


	/*
	
	 	一个domo:

			import { FormControl, FormGroup, Validators } from "@angular/forms";


			this.user = new FormGroup({
  				username: new FormControl('', [Validators.required,Validators.minLength(4), Validators.pattern(/^[a-z]{6,}$/)]),
  				//password: new FormControl('', [Validators.required]),
 			});


			
			<form [formGroup]="user" >
			  <label>
			    <span>用户名</span>
			    <input type="text" formControlName="username" placeholder="请输入您的 名字">
			  </label>
			  <div *ngIf="user.get('username').hasError('required') && user.get('username').touched" class="error">
			    username 是必填项
			  </div>
			  <div *ngIf="user.get('username').hasError('minlength') && user.get('username').touched" class="error">
			    username 长度要大于4
			  </div>
			  <div *ngIf="user.get('username').hasError('pattern') && user.get('username').touched" class="error">
			    username 格式不正确
			  </div>
				<button type="submit" [disabled]="user.invalid" (click)="handle(user.value)">Sign up</button>
			</form>


	 */