Angular Relationship Object within an Object

Question

I have a class relating to another class in java, example: 1:1 address contributor

get with Postman on a collaborator:

{
    "colaborador_id": 17,
    "colaborador_nome": "TESTE TESTE",
    "colaborador_data_nasci": "07/12/1983",
    "colaborador_cpf": "333.333.333-33",
    "colaborador_cnpj": " XX.XXX.XXX/YYYY-ZZ",
    "colaborador_rg": "33.333.333-3",
    "colaborador_email": "[email protected]",
    "colaborador_celular": "13 991463333",
    "colaborador_telefone": "13 35353535",
    "colaborador_tipo_contratacao": "CLT",
    "endereco": {
        "endereco_id": 18,
        "endereco_rua": "Avenida TESTE",
        "endereco_numero": "100",
        "endereco_complemento": "Ap 100",
        "endereco_cep": "11702-400",
        "endereco_bairro": "Morumbi",
        "endereco_cidade": "São Paulo",
        "endereco_estado": "SP"
    }
}

however at the angle I would like to edit on the screen, but the part of the address "Object within contributor" I am not getting

  <div class="form-group">
        <label for="endereco_rua">endereco_rua:&nbsp;</label>
        <input type="text" formControlName="endereco_rua"   name="endereco_rua"
        class="col-lg-6" id="endereco_rua">
      </div>

Any collaborator item I can now change the address items that are within contributor I can’t change...

Answer 1

Good evening everyone, I identified the correct configuration 1:1 for HTML inside the angular, I will post here for those who have the same problem I had, follow the code:

MY . TS to edit collaborators:

export class ColaboradoresEditComponent implements OnInit {

constructor(private formBuilder: FormBuilder,private router: Router, 
private colaboradoresService: ColaboradoresService) { }

  colaborador: Colaborador;
  editForm: FormGroup;
  enderecos: any;

  ngOnInit(): void {
  let colaboradorId = window.sessionStorage.getItem("colaboradorEditId");

 this.editForm = this.formBuilder.group({           
 colaborador_id: [''],
  colaborador_nome: ['', Validators.required],
  colaborador_data_nasci: ['', Validators.required],     
    endereco: this.formBuilder.group ({  
    endereco_id:['',Validators.required],
    endereco_rua:['',Validators.required],
    endereco_numero:['',Validators.required]           
    })
  });            

this.colaboradoresService.getColaboradorById(+colaboradorId).subscribe(data => {this.editForm.setValue(data);
  console.log(data)              

});

}

=============================================
Agora meu HTML (resumido) da parte do coloaborador !!!!


  <div class="form-group">
    <label for="colaborador_nome">Nome:&nbsp;</label>
    <input type="text" formControlName="colaborador_nome" placeholder="Digite 
nome completo" name="colaborador_nome"
      class="col-lg-6" id="colaborador_nome">
  </div>

  <div class="form-group">
    <label for="colaborador_data_nasci">Data Nascimento:&nbsp;</label>
    <input type="text" formControlName="colaborador_data_nasci" 
placeholder="01/12/1983"
      name="colaborador_data_nasci" class="col-lg-2" 
id="colaborador_data_nasci">
  </div> 

=============================================
Agora meu HTML (resumido) da parte do endereco!!!!

<div class="form-group" formGroupName="endereco">

    <label for="endereco_rua">Endereço:</label>
    <input type="text" formControlName="endereco_rua" name="endereco_rua" 
    id="endereco_rua">
     <label for="endereco_numero">Numero:</label>
    <input type="text" formControlName="endereco_numero" 
    name="endereco_numero" id="endereco_numero">   

AT END answering my question the address that is within the contributor in HTML needs to be within a "DIV" by specifying the "formGroupName" = address. If I’m not mistaken this is reactive forms and I didn’t know it perfectly.Thank you.

  EXEMPLO: <div class="form-group" formGroupName="endereco">