如何在服务中初始化响应式表单而不是注入到组件中

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*/
  });
}

现在您可以在组件中调用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 我已经完成了。