响应式表单校验方法汇总

最新推荐文章于 2023-09-23 11:02:01 发布

小鸟__老鹰

最新推荐文章于 2023-09-23 11:02:01 发布

阅读量504

点赞数

分类专栏： form 文章标签： typescript angular

本文链接：https://blog.csdn.net/weixin_44781409/article/details/107028604

版权

form 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一 .创建一个响应式表单
1.引入模块

import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

2.注入

 public storyForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.storyForm = this.fb.group({
      sonsName: [null, [Validators.required, Validators.maxLength(220)]],
      isIteration: [null],
    });
    }

二. 用法

1.  禁用

    1. 禁用全部表单
   this.storyForm.disable()
   2.   禁用表单单个条件
    this.storyForm..get('isIteration').disable();

2.启用禁用

    1. 启用全部表单
   this.storyForm.enable()
   2.   启用表单单个条件
    this.storyForm..get('isIteration').enable();

3.启用禁用

    1. 清空全部表单
   this.storyForm.reset()
   2.   清空表单单个条件
    this.storyForm..get('isIteration').reset();

4.赋值

    1. 批量赋值
   this.storyForm.patchValue({isIteration:值 , sonsName:值 });
    2.   单个赋值
    this.storyForm.get('isIteration').patchValue("值");

动态添加校验

 this.storyForm.get('isIteration').setValidators([Validators.required])
 
 this.storyForm.get('isIteration').setValidators([Validators.required,Validators.maxLength(50)])

6.移除校验

方法一
this.storyForm.get('sonsName').resetFields() //移除校验结果并重置字段值
方法二
this.storyForm.get('sonsName').clearValidators() //移除校验结果

7.更新表单中的校验器

this.storyForm.updateValueAndValidity()
this.storyForm.enable()

注意： 更新了表单中的校验器以后，然后通过enable()方法，根据值和校验器重新计算状态

8.表单中某项选择变化的回调

this.storyForm.get('isIteration').valueChanges.subscribe(isIteration =>{ }）

三. FormArray 和 FormGroup的多层嵌套中方法

  this.validateForm = this.fb.group({
      workFlowContent: this.fb.array([
        this.fb.group({
          sonsName: [null, [Validators.required, Validators.maxLength(220)]],
          isIteration: [null],
          ]}
       ])
    });
         
  get workFlowContent(): FormArray {
    return this.validateForm.get('workFlowContent') as FormArray;
  }

1.获取某个表单中的一个值（获取，操作）

 ((this.validateForm.get('workFlowContent') as FormArray).controls[0]).get('isIteration').value;

2.获取全部的值（获取）

 (this.validateForm.get('workFlowContent') as FormArray).value

相关其他类似方法同上，类似实现请移步