angular form 表单验证

转载自：https://blog.csdn.net/qq_37167049/article/details/96323762

所有的表单元素需要加上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>

     */