Is there a way to use a form from a component in another?

Question

I have a component that I want to display some forms, each one from different components. (Each tab is a form from a component).

It's basically a component just with the tabs and the space for the forms.

And 6 form components displayed in their respective tab.

I tried just adding the component selector on the component, but it didn't recognize the form builder.

This is the form component:

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: ['']
    });
  }

This is the template of the component where I'm trying to show the form from the other component:

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

There's the problem: I want to create a submit button to submit all forms from different components.

From the component I'm displaying the forms, I don't have access to the formBuilders of the forms because they're from another component.

Is there a way to access the formBuilder from other component?

Thank you. :)

Answer 1

You can pass your form as @Input() property.

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

Inside child.component.ts get the "form" property

@Input() form: FormGroup

very similar problem here Pass Angular Reactive FormControls to Children Components

Answer 2

You may also want to add the form group to a service provided in root.