Angular 响应式表单之表单分组

huaixiaoz 发布于2019-08-23 15:24 / 2487人阅读

摘要：跟踪独立表单控件的值和验证状态。当使用响应式表单时，类是最基本的构造块。因此在查看单个表单是否有错误信息时，必须先判断是子组件还是孙子组件。方法检查组内是否有一个具有指定名字的已启用的控件，存在返回，不存在返回。

1、案例需求

表单提交，表单全部校验成功才能提交，当表单校验错误，表单边框变红，同时有错误提示信息，有重置功能

在线预览

git仓库

2、名词解释

在分析代码之前，首先明确 FormControl、formControl、formControlName、FormGroup、formGroup、formGroupName、FormArray、formArray、formArrayName 都是什么意思以及它们的用法。

2.1、FormControl

FormControl：跟踪独立表单控件的值和验证状态。它和 FormGroup 和 FormArray 是 Angular 表单的三大基本构造块之一。它扩展了 AbstractControl 类，并实现了关于访问值、验证状态、用户交互和事件的大部分基本功能。

当使用响应式表单时，FormControl 类是最基本的构造块。要注册单个的表单控件，在组件中导入 FormControl 类，并创建一个 FormControl 的新实例，把它保存在类的某个属性中。

export class AppComponent implements OnInit {
    const control = new FormControl("", Validators.required);
    console.log(control.value);      // ""
    console.log(control.status);     // "INVALID"
}

在组件类中创建了控件之后，还要把它和模板中的一个表单控件关联起来，为表单控件添加 formControl 绑定。


  Name:

formControl：是一个输入指令，接受 FormControl 的实例，在模版中使用。

formControlName: 也是输入指令，但是它接受的是一个字符串，同 formGroup 指令配合使用。


  
  
  
  


//等同于

2.2、FormGroup

FormGroup：跟踪一组 FormControl 实例的值和有效性状态

FormGroup 把每个子 FormControl 的值聚合进一个对象，它的 key 是每个控件的名字。它通过归集其子控件的状态值来计算出自己的状态。如果组中的任何一个控件是无效的，那么整个组就是无效的。

2.3、FormArray

FormArray：跟踪一个控件数组的值和有效性状态

FormArray 聚合了数组中每个表单控件的值。它会根据其所有子控件的状态总结出自己的状态。如果 FromArray 中的任何一个控件是无效的，那么整个数组也会变成无效的。

FormControl、FormGroup、FormArray 类用法一致

formControl、formGroup、formArray 输入指令值为对应类的实例用法一致

formControlName、formGroupName、formArrayName 输入指令值为字符串用法一直

3、代码分析

fromGroup 可以然我们对表单内容进行分组，方便我们在语义上区分不同类型的输入，本例中，地址细分为“省”、“市”、“区”。

this.formGroup = this.fb.group({
      name: ["", nameValidator()],
      age: ["", ageValidator()],
      sex: ["", sexValidator()],
      address: this.fb.group({
        province: ["", requiredValidator("请输入省")],
        city: ["", requiredValidator("请输入市")],
        district: ["", requiredValidator("请输入区")]
      })
    });

address 此时不是 fromControl 而是 formGroup。


    地址：
    
      省：
      
      {{errorMessage("province")}}
    
    
      市：
      
      {{errorMessage("city")}}
    
    
      区：
      
      {{errorMessage("district")}}

在获取省市区的 formControl 时，可以通过这样获取

// 太复杂了
this.formGroup.controls["address"].controls["province"];

// 同样复杂
this.formGroup.get("address").controls["province"];

// 还好
this.formGroup.get(["address", "province"]);

第三种方式虽然简单，但是不够完美，get方法不能一步到位，必须同时传入 formGroupName 和 formControlName。因此在查看单个表单是否有错误信息时，必须先判断 formControlName 是子组件还是孙子组件。

errorMessage(formControlName: string): string {

    let control: AbstractControl;

    if (this.formGroup.contains(formControlName)) {
      control = this.formGroup.get(formControlName);
    } else {
      control = this.formGroup.get(["address", formControlName]);
    }
    return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : "";
  }

contains方法：检查组内是否有一个具有指定名字的已启用的控件，存在返回 true，不存在返回 false。

云服务器 GPU云服务器响应式响应式布局响应式网站响应式设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101993.html

angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 评论0 收藏0
Angular 响应式表单之下拉框

摘要：问题分析下拉框绑定的改变时，但是值却没有改变，导致检查错误。性别下拉框的男女保密点击删除保密男女此时就尴尬了，中已经没有保密选项了，但是下拉框绑定的却还是。自定义控件中当更新后，不再中，重置为删除后使用男女 1、问题分析下拉框绑定的 options 改变时，但是 value 值却没有改变，导致检查错误。在线预览 git仓库 2、代码分析项目中遇到一个问题，选择司机，是一个下拉...

siberiawolf 2019-08-23 15:38 评论0 收藏0