Angular 7 - Reactive Form update template

Question

I have the following class in my model

export class TelefoneNumero {
    id: number;
    numero: string;
    descricao: string;
}

export class Pessoa {

    constructor(){
        this.telefones = [];
    }
    
    id: number;
    nome: string;
    dataNascimento: string;
    telefones: TelefoneNumero[];
}

I have a person registration component and a component for phone registration..

Inside my person registration component I enter the example phone component

cadastre-pessoa.component.ts

@Component({
    selector: 'app-form-usuario',
    templateUrl: './form-usuario.component.html',
    styleUrls: ['./form-usuario.component.scss']
})
export class FormUsuarioComponent implements OnInit {
  
  public pessoa: Pessoa;
  ngOnInit() {
    this.pessoa = new Pessoa()
  }
}

<div class="col-sm-6 col-md-3 pb-3">
    <label for="usuario.telefone">E-mail</label>
    <input formControlName="telefone" id="pessoa.telefone" class="form-control"/>
</div>

<div class="col-md-6 col-sm-12 pb-2">
  <div class="row">
    <div class="col-sm-12">
      <h1 class="bd-title float-left">Telefones</h1>
    </div>
    <div class="col-sm-12">
      <div class="card border-none">
      <div class="card-body pt-4">
        <app-telefone-form [telefones]="pessoa.telefones"></app-telefone-form>
      </div>
    </div>
  </div>
</div>

cadastre-telefone.component.ts

@Component({
    selector: 'app-telefone-form',
    templateUrl: './telefone-form.component.html',
    styleUrls: ['./telefone-form.component.scss']
})
export class telefoneFormComponent implements OnInit {
  
  @Input() telefones: TelefoneNumero[];
  public telefoneForm: FormGroup;

  constructor(
        private formBuilder: FormBuilder,
    ) { }

  ngOnInit() {

        this.telefoneForm = this.formBuilder.group({
            telefones: this.formBuilder.array([])
        });
    }

  addTelefone(): void {
        let telefones = <FormArray>this.telefoneForm.get('telefones');
        telefones.push(this.criarTelefone());
        this.telefoneForm.markAsDirty();
    }

  private criartelefone(): FormGroup {
        return this.formBuilder.group({
            numero: [null, [Validators.required]],
            descricao: [null, [Validators.required]]
        });
    }
}

<table class="table table-hover" [formGroup]="telefoneForm">
  <tbody formArrayName="telefones">
    <tr *ngFor="let telefone of telefoneForm.get('telefones')['controls']; index as i" [formGroupName]="i">
            <td>
                <button type="button" class="btn btn-outline-success" (click)="addTelefone()">
                    <i class="icon-plus"></i>
                </button>
            </td>
            <td>
                
              <input formControlName="numero" type="text" class="form-control" />
<input formControlName="descricao" type="text" class="form-control" />
            </td>
        </tr>
  </tbody>
</table>

the button to save the person is in the person component, but the phones are in the phone component, as I can get the phone list by clicking a button on the person component ( parent component )

---

And is it possible for me to pass my class to formBuilder? or I will always have to create the properties in the formbuilder (e.g. number and phone description), because to do the reverse operation (popular my class with the data form Builder) I will have to run all formBuilder fields and set the values in the Phone class?

Example

onSubmit(){
  this.telefone.numero = this.telefoneForm.get('numero').value;
  this.telefone.descricao = this.telefoneForm.get('numero').descricao;
}

would not have an automatic way to mirror the class in formBuilder?

Answer 1

Have you tried using the Eventemitter? An exit would be to use the Eventemitter Event in a son Component Function and send to the father.

Answer 2

To create Form the way you’re doing is right.

To get the value of the form you can use the spread Operator of the es6.

onSubmit(){
  this.telefone= {...this.telefoneForm.value, ...this.telefone};
}

Answer 3

You can create only one formGroup with all the properties of the person, as well as the phones, so just pass this formGroup via Input to the Component app-telefone-form, so you have access to all the form information in both the Components, just use the API to get the values, for example the method .getRawValue() where it takes the current values of the form, ie the person.

Here is a reading on the case solution: https://medium.com/@joshblf/using-Child-Components-in-angular-Forms-d44e60036664