代码之家 › 专栏 › 技术社区 › Waleed Shahzaib

FormArray长度不按表单重置。重置()

angular-reactive-forms angular

7

Waleed Shahzaib · 技术社区 · 8 年前

我正在研究角度表单数据驱动方法,我在FormArray中动态添加了表单控件,我使用了表单。reset()重置添加的控件,但不包括窗体。reset()不会重置FormArray长度,我发现这是一个已知问题,可以使用这种方法解决, https://github.com/angular/angular/pull/11051 ,但我对此仍不清楚。请帮忙,谢谢

reviewForm: FormGroup;
  ngOnInit(){
    this.reviewForm = new FormGroup({            
      'controlArray': new FormArray([        
    ])
    });
  }

onSubmit(){     
    this.formData = new FormData(this.formService.formName, this.reviewForm.value.controlArray);    
    let formControls = JSON.stringify(this.formData); 
    // console.log(formControls);
    this.formService.createForm(formControls)
      .subscribe(
        data => console.log(data),
        error => console.error(error)
    );
    this.reviewForm.reset();    
  }

2 回复 | 直到 8 年前

1

18

Fiyaz Hasan 8 年前

调用重置打开 FormControl , FormGroup 或 FormArray 将只重置它们附加到的本机html控件的值。它不会从中删除控件 DOM .

唯一可以将控件添加到 FormArray公司 是通过组件代码文件(typescript)动态生成的。这意味着您将更新 DOM 动态。因此,调用 reset 上 FormArray公司 将只清除动态添加的控件的值(将控件设置为其初始状态。例如,输入框为空字符串)。另一方面,重置 FromArray 需要删除 FormArray公司 .

因此,在这种情况下,您必须设置 FormArray公司 用一个空的 FormArray公司 . 考虑以下示例,其中删除了 FormArray公司 将其替换为空 FormArray公司 例子

this.reviewForm.setControl('controlArray', new FormArray([]));

当与FormBuilder实例一起使用时,可以按以下方式执行:,

this.reviewForm.setControl('controlArray', this.fb.array([])); // here, `fb` is a form builder instance

2

wake-0 6 年前

clear 数组和add在必要时添加默认数组元素,例如:

// All array elements are removed
(this.reviewForm.get('controlArray') as FormArray).clear();
// Other values are removed
this.reviewForm.reset();
// When necessary add an initial array element
// (this.reviewForm.get('controlArray') as FormArray).push(new FormControl('Initial Element');