How to use a form in the sister component?

Asked

Viewed 43 times

0

I have a component called detail-paciente in which it contains a form with several properties, one of which is a Formarray. I want to use the same form as this component in a child component, as I could "inherit" the information from form to then use Formarray in the child component acompanhantes that I created?

component detail-paciente

public validation(): void {

    this.form = this.fb.group({

      pacienteId: ['', Validators.required],
      nomePaciente: ['', [Validators.required, Validators.minLength(9), Validators.maxLength(50)]],
      dataNascimento: ['', Validators.required],
      dataRegistro: [''],
      rg: [''],
      sexo: ['', Validators.required],
      acompanhantes: this.fb.array([]),
    });
  }

As a test I created the Formarray of companions within the Component detail-paciente and it works correctly.

  get acompanhantes(): FormArray {
    return this.form.get('acompanhantes') as FormArray;
  }

  AddAcompanhante(): void {
    this.acompanhantes.push(this.CreateAcompanhante({ acompanhanteId: 0 } as Acompanhante));
  }

  CreateAcompanhante(acompanhante: Acompanhante): FormGroup {
    return this.fb.group({
      acompanhanteId: [acompanhante.acompanhanteId, Validators.required],
      nomeAcompanhante: [acompanhante.nomeAcompanhante, Validators.required],
      dataNascimento: [acompanhante.dataNascimento, Validators.required],
      sexo: [acompanhante.sexo, Validators.required],
      pacienteId: [],
    });
  }


    <div [formGroup]="form" class="col">
            <div formArrayName="acompanhantes" *ngFor="let acompanhante of acompanhantes.controls; let i=index">
              <h3>Test</h3>
              <fieldset [formGroupName]="i" class="form-group">
...

How I use the above code on a brother component?

angular typescript

  • You can pass the form through a @Input() to the child component

  • And if I were to move from the child component to another child component it would be with @Input() tbm?

  • Yes, you can do it that way. But when you start passing an attribute across many layers (parent -> child -> grandson), it’s best to create a Service to share data between components.

  • Well, I’m a beginner in angular, and I still wondered how to use Input/Output using sister components, I’m using <router-outlet>, how do I define the ownership of the main form(form) on the sister route? ex: [formAcompanhante]=form

1 answer

-1

1. Using @Input()

If you have direct access to the child component, you can pass the form through the @Input property()

<!-- app-pai.component.html -->
<app-pai>
  <app-filho [formulario]="form"></app-filho>
</app-pai>

/* app-filho.component.ts */
export class FilhoComponent {
  @Input() formulario: FormGroup;
}

2. Using a Service

Now, if you don’t have access to the child component, which I believe is your case, you can create a service to share the form between the components.

I made an example in stackblitz demonstrating the 2 ways. Any question you can ask me.

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.