有没有办法使用另一个组件中的表单？

Question

我有一个要显示某些形式的组件，每种形式都来自不同的组件。 （每个选项卡都是来自组件的表单。）

基本上，它只是一个带有选项卡和表单空间的组件。

分别在其选项卡中显示6个表单组件。

我尝试仅在组件上添加组件选择器，但无法识别表单生成器。

这是表单组件：

export class EnderecoFormComponent extends BaseFormComponent implements OnInit {
  @ViewChild('nro') nro: ElementRef;
  uf: SelectItem[];

  constructor(private formBuilder: FormBuilder,
    private http: HttpClient,
    private dropdownService: DropdownService,
    private cepService: ConsultaCepService,
    private renderer: Renderer) {
    super();
  }

  ngOnInit() {

    this.uf = [
      { label: 'SP', value: 'SP' }
    ];

    this.formulario = this.formBuilder.group({
      id: [''],
      municipio: ['', Validators.required],
      cep: ['', Validators.required],
      uf: ['', Validators.required],
      cidade: ['', Validators.required],
      bairro: ['', Validators.required],
      logradouro: ['', Validators.required],
      numero: ['', Validators.required],
      complemento: ['']
    });
  }

这是组件的模板，我试图从其他组件显示表单：

<section id="endereco" class="tab-panel">
               <app-endereco-form>
               </app-endereco-form>
</section>

有一个问题：我想创建一个提交按钮，以提交来自不同组件的所有表单。

在显示表单的组件中，我无权访问表单的formBuilders，因为它们来自其他组件。

是否可以从其他组件访问formBuilder？

谢谢。 ：）

Answer 1

您可以将表单作为@Input（）属性传递。

<child-component [form]="formulario">

在child.component.ts内部获得“表单”属性

@Input() form: FormGroup

这里非常类似的问题 Pass Angular Reactive FormControls to Children Components

Answer 2

您可能还希望将表单组添加到root用户提供的服务中。