I have the following class in my template
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 phone registration component.
Within my person registration component I incorporate the example phone component
cadastro-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>cadastro-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, how can I get the phone list by clicking a button on the person component (parent component)
Is it possible for me to pass my class to formBuilder? or I will always have to create the properties in the formbuilder (eg number and description of the phone), because to do the inverse operation (popular my class with form builder data) I will have to rotate all fields of formBuilder and set the values in class PhoneNumber?
Example
onSubmit(){
this.telefone.numero = this.telefoneForm.get('numero').value;
this.telefone.descricao = this.telefoneForm.get('numero').descricao;
}Would not it have an automatic way to mirror the class in formBuilder?