摘要：根據最近的使用總結一下在中使用創建表單需求創建一個帶驗證的表單如果表單驗證不通過則提交按鈕自定義驗證器需求密碼需要格式為數字字母下劃線位參考自定義密碼驗證通過驗證時需要返回密碼格式為數字字母下劃線位動態創建表單需求表單增

根據最近的使用, 總結一下在ngx中使用reactive form

需求: 創建一個帶驗證的表單, 如果表單驗證不通過則提交按鈕disabled=true

  

    name: 
    
  
  

    password: 
    
  

  

    submit
    reset
  
    

// app.component.ts

import {Component, OnInit} from "@angular/core";
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "app";

  form: FormGroup;

  constructor(
    private fb: FormBuilder
  ){}

  ngOnInit(){
    this.form = this.fb.group({
      name: ["", Validators.required],
      password: ["", [Validators.required, Validators.minLength(6)]]
    });
  }

  submit(){
    if(this.form.valid){
      console.log("submiting...")
    }else{
      console.log("form is not valid")
    }
  }

  reset(){
    this.form.reset();
  }
}

需求: 密碼需要格式為數字字母下劃線6-12位

參考: Custom validators

// app.component.ts

...

// 自定義密碼驗證
function ValidPwd(control: AbstractControl):any {
  const reg = /^w{6,12}$/;
  if(reg.test(control.value)){
    // 通過驗證時需要返回 null
    return null;
  }
  return {status: "error", message: "密碼格式為數字字母下劃線6-12位"}
}

...
export class AppComponent implements OnInit {
...
  ngOnInit(){
    this.form = this.fb.group({
      name: ["", Validators.required],
      password: ["", [Validators.required, ValidPwd]]
    });
  }
...
}

需求: 表單增加朋友選項, 默認顯示一個, 可以增加/刪除

  

    name: 
    
  
    
  

    password: 
    
  

  
    

      friend(s): 
      
      +
      -
    
  

  

    submit
    reset
  

// app.component.ts

...

export class AppComponent implements OnInit {
  name = "app";

  form: FormGroup;
  friends;

  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ["", Validators.required],
      password: ["", [Validators.required, ValidPwd]],
      friends: this.fb.array([this.createFriend()])
    });

    this.friends = this.form.get("friends") as FormArray;
  }

  /**
   * 動態創建表單
   * @returns {FormControl}
   */
  createFriend() {
    return this.fb.control("", Validators.required);
  }

  /**
   * 增加輸入框
   */
  addFriend(): void {
    this.friends.push(this.createFriend());

  }

  /**
   * 移除輸入框
   * @param {number} i
   */
  removeFriend(i: number): void {
    this.friends.removeAt(i);
  }

...

}

需求: 增加單選框控制表單

在Reactive表單中, 使用ngModel時, 會出現報錯

Error: 
      ngModel cannot be used to register form controls with a parent formGroup directive.

報錯中也提示了, 應該在input中增加[ngModelOptions]="{standalone: true}"

文檔中是這么介紹的:

standalone: Defaults to false. If this is set to true, the ngModel will not register itself with its parent form, and will act as if it"s not in the form. This can be handy if you have form meta-controls, a.k.a. form elements nested in the 
 tag that control the display of the form, but don"t contain form data.

現在表單變成這樣:

  

    name: 
    
  
  

    password: 
    
  

  
    

      friend(s): 
      
      +
      -
    
  

  

    contactType: 
    mobile 
    landLine
  

  

    {{+contactType === 1?"landLine":"mobile"}}: 
    
  

  

    submit
    reset
  

app.componen.ts中增加contactType變量, 表單實例中增加contact:

// app.component.ts

...

export class AppComponent implements OnInit {
  name = "app";

  form: FormGroup;
  friends;
  contactType:number = 0;

  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ["", Validators.required],
      password: ["", [Validators.required, ValidPwd]],
      friends: this.fb.array([this.createFriend()]),
      contact: ["", Validators.required]
    });

    this.friends = this.form.get("friends") as FormArray;
  }

  /**
   * 動態創建表單
   * @returns {FormControl}
   */
  createFriend() {
    return this.fb.control("", Validators.required);
  }

  /**
   * 增加輸入框
   */
  addFriend(): void {
    this.friends.push(this.createFriend());

  }

  /**
   * 移除輸入框
   * @param {number} i
   */
  removeFriend(i: number): void {
    this.friends.removeAt(i);
  }

  submit() {
    if (this.form.valid) {
      console.log("submitting...");
    } else {
      console.log("form is not valid");
    }
  }

  reset() {
    this.form.reset();
  }
}