Boa tarde! Tenho um cadastro de usuário que tem um array de telefones, consigo criar e buscar as informações do banco, mas quanto ao atualizar quando é para preencher os campos do formulário com as informações os valores não vem, uso o mesmo formulário de cadastro e atualizar. Em outros formulários o update funciona perfeitamente, porém como o formulário em questão há um array o formulário só traz o nome do usuário o resto não vem.
import { Subscription } from 'rxjs';
import { Component, OnInit, Injector, OnDestroy } from '@angular/core';
import { FormArray, FormGroup, Validators } from '@angular/forms';
import { FormularioPadrao } from 'src/app/share/formulario-padrao';
import { IUser } from '../user-shared/user-interface';
import { UserService } from '../user-shared/user.service';
@Component({
selector: 'app-user-form',
templateUrl: './user-form.component.html',
styleUrls: ['./user-form.component.scss']
})
export class UserFormComponent extends FormularioPadrao<IUser> implements OnInit, OnDestroy {
formUpdate!: IUser;
subscription!: Subscription;
emailUser$!: any;
emalMatch = true;
optionSocial = [
{ social: "Whatsapp", value: "whatsapp" },
{ social: "Telegram", value: "telegram" },
{ social: "Signal", value: "signal" }
]
typoPhone = [
{ tipo: "Fixo", value: "fixo" },
{ tipo: "Celular", value: "celular" }
]
typeUser = [
{ tipU: "Administrador", value: "administrador" },
{ tipU: "Usuário", value: "user" }
]
activeUser = [
{ acUser: "Ativo", value: true },
{ acUser: "Inativo", value: false }
]
constructor(
protected injector: Injector,
protected servico: UserService
) {
super(injector, 'user', servico)
}
// ********************* NG on Init ********************
ngOnInit(): void {
this.popularForm(); // função de popular o forumulário
this.formulario = this.fb.group({
_id: [],
name: [null, Validators.required],
email: [null, [Validators.required, Validators.email]],
phone: this.fb.array([this.addPhone()]),
login: [null, Validators.required],
password: ['', [Validators.required, Validators.minLength(6)]],
repPassword: ['', [Validators.required, Validators.minLength(6)]],
active: [null, Validators.required],
userKind: [null, Validators.required]
}, { validator: [this.matchingPasswords] },
);
}
// ********************* Comparação de passaword ********************
matchingPasswords(group: FormGroup) {
const password = group.get('password')?.value ?? '';
const repPassword = group.get('repPassword')?.value ?? '';
if (repPassword.trim() + password.trim()) {
return repPassword !== password ? { senhaMatching: false } : null;
} else {
return null;
}
}
// ********************* Função de Popular Formulário ********************
popularForm() {
if (this.urlAtiva !== 'new') {
this.servico.getByID(this.urlAtiva)
.subscribe(
dados => this.formUpdate = dados,
error => console.log(error),
() => {
this.formulario.patchValue({
_id: this.formUpdate._id,
name: this.formUpdate.name,
// phone: this.fb.array([this.addPhone({
// phoneType: this.formUpdate.phone.phoneType,
// phoneNumber: this.formUpdate.phone.phoneNumber,
// social: this.formUpdate.phone.social
// })]),
email: this.formUpdate.email,
login: this.formUpdate.login,
password: this.formUpdate.password,
repPassword: this.formUpdate.repPassword,
active: this.formUpdate.active,
userKind: this.formUpdate.userKind,
}
)
}
)
}
}
// Inicio para adicionar telefone
addPhone(): FormGroup {
return this.fb.group({
phoneType: [null],
phoneNumber: [null],
social: [null]
});
}
newPhone(): void {
this.phoneFormControl.push(this.addPhone());
}
removeTelefone(i: any): void {
this.phoneFormControl.removeAt(i);
}
get phoneFormControl(): FormArray {
return this.formulario.get('phone') as FormArray;
}
// *********************** NgOnDestroy ****************fxFlex="
ngOnDestroy() {
this.subscription.unsubscribe();
}
}