一、響應式表單定義

響應式表單:我們在元件中建立表單控制元件的物件樹，並使用特定的方式將繫結到元件模板中的原聲表單控制元件元素上

二、響應式表單的好處

我們可以在元件類中直接建立和維護表單控制元件物件。由於元件類可以同時訪問資料模型和表單控制元件結構， 因此我們可以把表單模型值的變化推送到表單控制元件中，並把變化後的值拉取回來。 元件可以監聽表單控制元件狀態的變化，並對此做出響應

三、響應式表單中涉及到的詞彙及含義

四、formControl簡單的使用

public name1 = new FormControl(初始值,驗證器陣列,一部驗證器陣列)

<input type="text" class="form-control" [formControl]="name1">

五、formGroup的使用

public formgroup = new FormGroup({
    name:new FormControl("你好"),
    password:new
 
 FormControl("",Validators.required)
})

在html頁面中可以通過:
* 1、formgroup.value獲取表單中全部的值
* 2、formgroup.status檢驗表單當前是處於什麼狀態

<form role="form" [formGroup]="formgroup" novalidate>
    <div class="form-group">
        <label>使用者名稱:</label>
        <input type="text" class="form-control"
 
 formControlName="name" />
    </div>
    <div class="form-group">
        <label>密碼:</label>
        <input type="password" class="form-control" formControlName="password" />
    </div>
</form>
<p>Form value: {{ formgroup.value | json }}</p>
<p>Form status: {{ formgroup.status | json }}</p>

六、與FormBuilder結合使用,官方解釋

修改元件程式碼

    ...
    constructor(private fb : FormBuilder) {
        this.createForm();
    }
    public formgroup : FormGroup;
    createForm() {
        this.formgroup = this.fb.group({
              name: new FormControl("你好"), //下面幾種方式也可以
              password: ["",Validators.required],
              city:''
        })
    }
    ....

七、多個FormGroup的使用

專案中表單越來越複雜，那麼就可以使用多個FormGroup來區分使用

<fieldset formGroupName="password">
    <div class="form-group">
        <label>密碼:</label>
        <input type="password" class="form-control" formControlName="first" />
    </div>
    <div class="form-group">
        <label>確認密碼:</label>
        <input type="password" class="form-control" formControlName="last" />
    </div>
</fieldset>

createForm() {
    this.formgroup = this.fb.group({
        name: new FormControl("你好"), 
        password: this.fb.group({
            first:'',
            last:''
        }),
        city:'',
        state:'',
        sex:["",Validators.required],
        hobby:''
    })
}

八、獲取FromControl的屬性

使用方式

<input type="text" class="form-control" [formControl]="name1">
<div>{{name1.value}}</div>
<div>{{name1.status}}</div>
<div>{{name1.pristine}}</div>
<div>{{name1.untouched}}</div>

<input type="text" class="form-control" formControlName="city" />
<p>{{formgroup.get("city").value}}</p>

九、關於賦值、修改、提取

• 1、給form表單裡面的formControl賦值

  • 前面就提到了，直接在建立的時候賦值就可以傳遞到html頁面
  • 使用setValue(嘗試失敗,直接使用patchValue)

• 2、修改值使用patchValue

  //修改值
  edit(){
      this.formgroup.patchValue({
          name:"我不是很好"
      })
  }

• 3、提取表單值

  <form role="form" [formGroup]="formgroup" novalidate (ngSubmit)="postData()">
  ....
  </form>

  //提交資料
  postData(){
      console.log(this.formgroup.value);
  }

十、表單的校驗

• 1、使用自帶的校驗器

  • Validators.required必填欄位
  • Validators.minLength 最小長度

  • Validators.maxLength最大長度

    username:["",[Validators.required,Validators.minLength(3),Validators.maxLength(6)]],

    <!--還沒封住指令-->
    <div class="form-group">
        <label>使用者名稱:</label>
        <input type="text" [class]="!myform.get('username').untouched?(myform.get('username').status==='VALID'?'form-control':'form-control error'):'form-control'" formControlName="username">
        <!--如果沒有訪問的時候或者不含有required的時候隱藏-->
        <p [hidden]="myform.get('username').untouched || !myform.hasError('required','username')" class="text-danger">使用者名稱必填</p>
        <p [hidden]="myform.get('username').untouched || (!myform.hasError('minlength','username') ? !myform.hasError('maxlength','username'):null)" class="text-danger">使用者名稱長度有誤</p>
    </div>

• 2、自定義校驗器

  • 直接定義在元件內

    //定義一個手機號碼的校驗器
      mobileValidator(control:FormControl):any{
        var reg = /^1[34578]\d{9}$/;
        let valid = reg.test(control.value);
        //如果驗證通過就返回null否則就返回手機號碼格式有誤
        return valid ? null:{moblie:"手機號碼格式有誤"};
      }
    //使用
    mobile_num:["",[Validators.required,this.mobileValidator]],

  • 定義一個服務注入到元件中(自行看程式碼實現)