Angular开发(十一)-关于响应式表单及表单的校验

一、响应式表单定义

响应式表单:我们在组件中创建表单控件的对象树，并使用特定的方式将绑定到组件模板中的原声表单控件元素上

二、响应式表单的好处

我们可以在组件类中直接创建和维护表单控件对象。由于组件类可以同时访问数据模型和表单控件结构， 因此我们可以把表单模型值的变化推送到表单控件中，并把变化后的值拉取回来。 组件可以监听表单控件状态的变化，并对此做出响应

三、响应式表单中涉及到的词汇及含义

词汇	解释	使用场景
formControl	用户跟踪一个单独表单控件的值和有效性状态
formGroup	用户跟踪一组表单控件的值和有效性状态
FormArray	有序数组的值和有效性

四、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的属性

属性	说明
value	FormControl的值。
status	FormControl的有效性。可能的值有VALID、INVALID、PENDING或DISABLED。
pristine	如果用户尚未改变过这个控件的值，则为true。它总是与myControl.dirty相反。
untouched	如果用户尚未进入这个HTML控件，也没有触发过它的blur（失去焦点）事件，则为true。 它是myControl.touched的反义词。

使用方式

<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]],

  • 定义一个服务注入到组件中(自行看代码实现)

十一、项目源文件下载地址