有没有办法在另一个组件中使用某个组件？

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里面获取“form”属性

@Input() form: FormGroup

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

Answer 2

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