Question

我正在尝试在动态创建的表单中重置选择表单控件。表单控件的名称将是动态的，并且每次都不同。我如何将控件名称传递给reset方法，以便在控件重置而不是设置为null时为其提供默认值。下面的代码似乎没有在reset方法中使用controlName。

resetForm() {
    for (let i = 0; i < this.storedFieldNames.length; i++) {
      console.log(this.form);
      const controlName = this.storedFieldNames[i];
      const controlVal = this.storedFieldVals[i];
      this.form.reset({
        controlName: controlVal
      });
    }
  }

我希望表单能够重置，并且所有选择值的默认选择值都将是原始默认值。目前，它会重置表单，但值是空的。

Answer 1

保存您的原始表单值，并在调用reset时，只需传递该原始值即可。

constructor(fb: FormBuilder) {
  this.someForm = fb.group({ ... });
  this.initialValue = this.someForm.value;
}

reset() {
  this.someForm.reset(this.initialValue);
}

看起来更干净，更容易理解，不是吗？

Answer 2

您可以使用那里的初始值从此重置

export class LoginComponent implements OnInit {
  public loginForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit(){
    this.initialValue = this.loginForm.value;
  } 

  public resetForm() {
    this.loginForm.reset(this.initialValue);
  }
}

使用动态表单名称重置表单控件

2 个答案: