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

Posted 2023-02-23

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

【英文标题】：How to initialize reactive form at service and than inject to component

【发布时间】：2019-12-07 13:54:18

【问题描述】：

如何在服务中初始化响应式表单并注入到每个组件中？

我有 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);

这给出了一个未初始化的错误。

【问题讨论】：

你是否将FormGroup从服务返回给组件？

这里的RxFormBuilder 是什么？你是从哪里导入的？

【参考方案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 我已经完成了。

【讨论】：

是的，这项工作。我能够从输入组件获取数据并将其传递给服务。如何在不使用主题的情况下将随时间变化的值从服务传递到第二个组件？

这完全取决于您的用例。您能否考虑提出另一个问题，并提供有关用例的一些详细信息？这将使该线程更加专注于一个问题。谢谢:)