How to set model data in Reactive Forms, Angular 9 - html

Question

I started to study angular, i created a single crud using Angular 9 and Spring boot, but i have a question, what I'm trying to do is to get the data of the table below and move it for a reactive form to upload the data.
How to solve the issue?
enter image description here
.
enter image description here
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<label for="">Nome</label>
<input type="text" formControlName="nome" class="form-control">
</div>
<div class="form-group">
<label for="">email</label>
<input type="text" formControlName="email" class="form-control">
</div>
<div class="form-group">
<label for="">username</label>
<input type="text" formControlName="username" class="form-control">
</div>
<button class="btn btn-outline-primary"> Salvar</button>
<button [routerLink]="['/']" style="margin-left: 1%;" class="btn btn-outline-warning"> Voltar</button>
</form>
My app-routing.module.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ShowContactComponent } from './Componets/contact/show-contact/show-contact.component'
import { CreateContactComponent } from './Componets/contact/create-contact/create-contact.component'
const routes: Routes = [
{path:'', component:ShowContactComponent},
{path:'create', component:CreateContactComponent},
{path:'create/:id', component:CreateContactComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { Contact } from '../contact-model/Contact';
import { ContactService } from '../../contact.service';
import { Router, ActivatedRoute } from '#angular/router';
#Component({
selector: 'app-create-contact',
templateUrl: './create-contact.component.html',
styleUrls: ['./create-contact.component.css']
})
export class CreateContactComponent implements OnInit {
form:FormGroup;
contacts:Contact[] = []
contact:Contact
constructor(private service:ContactService, private router:Router, private fb:FormBuilder, private AR:ActivatedRoute) { }
ngOnInit() {
// this.paramService();
this.validateForms();
}
submit(){
const formValue = this.form.value;
const contact:Contact = new Contact(formValue.nome, formValue.email ,formValue.username );
this.service.create(contact).subscribe(response =>{
this.contacts.push(response);
this.router.navigate([''])
console.log(response);
})
}
paramService(){
const formValue = this.form.value;
const contact:Contact = new Contact(formValue.nome, formValue.email ,formValue.username );
console.log(contact);
this.service.readOne(this.contact.id).subscribe(response =>{
this.form.patchValue({
nome: contact.nome,
email: contact.email,
username: contact.username
});
});
}
validateForms(){
this.form = this.fb.group({
nome: ['', Validators.required],
email: ['', Validators.required],
username: ['', Validators.required]
})
}
}

Answer 1

You can do it in this way:
validateForms(data?: Contact){
this.form = this.fb.group({
nome: [data.name || '', Validators.required],
email: [data.email || '', Validators.required],
username: [data.username || '', Validators.required]
})
}
Now you should pass the data to show in your form:
ngOnInit() {
// const contact: Contact = ...
this.validateForms(contact);
}
Please change 'validateForms' name to 'initForm'.