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

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>

---

您可能需要阅读 AngularIndepth 我完全做的。