如何验证/formArray提交

Question

我有一个父 formGroup和一个formArray作为控件。此formArray包含一个子 formGroup。

目的

其目的是验证特定字段在formArray onSubmit中的formGroup中的所有控件。

表单是reactiveForm

例如：父母formGroup

 parentForm = this.fb.group({
    formArray: this.fb.array([]),
  });

儿童formGroup

childForm = this.fb.group({
   //field which need to be validated onSubmit manually
   field1: this.fb.control('',{
   validators: myCustomValidator
   }),
   //this field doesn't need to be validate on submit
   field2: this.fb.control('')
}

 let formArray = this.parentForm.get('formArray') as formArray //Get it as formArray
    formArray.push(this.childForm(data)) //Push the data into the childForm

Answer 1

首先，我们需要控制子 formGroup中的特定字段。我们迭代formArray并获得formArray组的单独控件

对于手动验证和更新更改的值，我们可以使用updateValueAndValidity

submitForm() :void
{
 for(const childGroup of this.formArray().controls)
{
childGroup.get('field1')?.updateValueAndValidity(); //Validate and Update the control manually
}
}

或者，您可以使用updateOn属性并将其设置为提交，但有时它可能无法正常工作。

childForm = this.fb.group({
   //field which need to be validated onSubmit manually
   field1: this.fb.control('',{
   updateOn: 'submit'
   validators: myCustomValidator
   }),
   //this field doesn't need to be validate on submit
   field2: this.fb.control('')
}