Question

如何在使用时初始化反应形式，然后注入到每个组件中？

我有2个组件和一项服务。这两个组件具有相同的形式，因为它只是一次考试而在一个组件上键入而在另一个组件上显示。

  -----service----


    
public form: FormGroup;

 constructor(
    private formBuilder: RxFormBuilder
  ) 

 createform(sfm) {
    this.form = this.formBuilder.formGroup(sfm);
  }






-------input and ouptu components --------



 constructor(
    private service: Service
  ) { }

  ngOnInit() {

    const sfm = new InputForm();
    this.service.createform(sfm);

}

这会给出一个错误，表明未初始化。

Answer 1

由于Component将利用您的表单，因此将生成的表单从服务返回到组件是有意义的。

您的服务也应该基于一些数据生成表单，以便可以使用一些数据初始化表单。

话虽如此，请从服务方法中返回表格：

constructor(
  private formBuilder: FormBuilder
)

createForm(sfm) {
  return this.formBuilder.formGroup({
    /*Generate form based on sfm here*/
  });
}

现在，您可以在Component中调用createForm方法，并期望它返回一个FormGroup：

userForm: FormGroup;

constructor(
  private service: Service
) {}

ngOnInit() {
  const initialData = {
    name: 'John'
  };
  this.userForm = this.service.createForm(initialData);
}

然后您可以照常在模板中使用此表单：

<form [formGroup]="userForm">
  ...
</form>

您可能想通读this article on AngularInDepth，因为我已经做到了。

如何在服务时初始化反应形式并注入组件

1 个答案: