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>

     */