How to add a child component within parent component using Angular Reactive forms?

Question

I'm adding a child component to a parent component form.

Pessoa.html

<form [formGroup]="usuarioForm" novalidate>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="exampleInputNome">Nome</label>
                        <input type="text"
                               formControlName="nome"
                               class="form-control "
                               placeholder="Nome" />
                    </div>
                </div>

            <endereco [enderecoGroup]=usuarioForm></endereco>

            <button type="submit"
                    class="btn btn-default"
                    (click)="InsereUsuario(usuarioForm.value)">
                Enviar
            </button>
</form>

Endereco.html

            <h4>Endereço</h4>
            <div class="col-md-2">
                <div class="form-group" [formGroup]="enderecoGroup">
                    <label for="exampleInputCep">Cep</label>
                    <input type="text"
                           class="form-control"
                           placeholder="Cep"
                           (blur)="GetAdress($event.target.value)">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group" [formGroup]="enderecoGroup">
                    <label for="exampleInputComplemento">Complemento</label>
                    <input type="text"
                           class="form-control"
                           placeholder="Complemento"
                           [value]=endereco?.complemento>
                </div>
            </div>

Endereco.ts

@Input() enderecoGroup: FormGroup;

endereco: Endereco

GetEndereco(Cep: string) {
    this.servico.GetEndereco(Cep)
        .subscribe(resposta => this.endereco = resposta);
}

When submitting the form the Adress.html entries are blank, what should I do?

I'm using React forms

Stackblitz

Project updated on StackBlitz if anyone needs it.

cura
– cura

2018-06-12 17:23:13 +00:00
Commented Jun 12, 2018 at 17:23 — cura
– cura, Commented Jun 12, 2018 at 17:23

cura · Accepted Answer · 2018-06-05 12:11:43Z

2

Reading the Angular documentation on React Forms, I discovered that:

Populate the form model with setValue() and patchValue()

I'm using patchValue():

Endereco.ts

   GetEndereco(Cep: string) {
        this.servico.GetEndereco(Cep)
            .subscribe(response => {
                this.enderecoGroup.patchValue({
                    bairro: response.bairro,
                    logradouro: response.logradouro,
                    cidade: response.localidade
                });
            });
    }

Demo stackblitz

Print:

edited Jun 5, 2018 at 12:11

answered Jun 1, 2018 at 11:59

cura

1,2231 gold badge20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eduardo Vargas · Accepted Answer · 2018-06-05 11:37:25Z

1

+50

I did it in what I think it is an better way. Creating an inside group for address and passing just that to the address component.

Here is my stackblitz

.TS

this.usuarioForm = this.formBuilder.group({
  nome: this.formBuilder.control('', [Validators.required, Validators.minLength(3)]),
  sobreNome: this.formBuilder.control('', [Validators.required]),
  emailAdress: this.formBuilder.control('', [Validators.required, Validators.email]),
  tipoPessoa: this.formBuilder.control('1', [Validators.required]),
  endereco: this.formBuilder.group({ // Another form group inside the bigger group for better encapsulation.
    cep: this.formBuilder.control('', [Validators.minLength(8), Validators.maxLength(9)]),
    logradouro: this.formBuilder.control('', [Validators.required]),
    bairro: this.formBuilder.control('', [Validators.required]),
    cidade: this.formBuilder.control('', [Validators.required]),
    complemento: ''
  })
});

get endereco() {
  return this.usuarioForm.get('endereco') as FormGroup; // this is just a refence to the inside group that contains information just relavant to address
}

Html:

<endereco [enderecoGroup]=endereco></endereco> //pass just the inside formGroup

In this way there is no need to listen to changes in the child component

edited Jun 5, 2018 at 11:37

answered Jun 5, 2018 at 10:59

Eduardo Vargas

9,5022 gold badges22 silver badges30 bronze badges

7 Comments

cura Over a year ago

Eduardo can not see the code, the console is full of errors! Can you modify it?

cura Over a year ago

I can not see what you did, could you release stackblitz?

Eduardo Vargas Over a year ago

Sorry I dont know how to use stackBlitz properly I just forked again

Eduardo Vargas Over a year ago

try now, I just released a new one, idk why it wasnt updating my previous one.

cura Over a year ago

The problem with your code is that the form will only be valid with the user group entries.

|

Collectives™ on Stack Overflow

How to add a child component within parent component using Angular Reactive forms?

Pessoa.html

Endereco.html

Endereco.ts

Stackblitz

2 Answers 2

Endereco.ts

Demo stackblitz

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Pessoa.html

Endereco.html

Endereco.ts

2 Answers 2

Endereco.ts

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related