ExpressGrocery/angular_frontend/src/app/components/edit-account/edit-account.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Account } from 'src/app/model/account.model';
import { AccountService } from 'src/app/service/account.service';

@Component({
  selector: 'app-edit-account',
  templateUrl: './edit-account.component.html',
  styleUrls: ['./edit-account.component.css']
})
export class EditAccountComponent implements OnInit {

  aid: any ;
  account: any;
  accountForm: FormGroup;
  
  constructor(private actRoute: ActivatedRoute,private route : Router, private accountService : AccountService) {
    this.accountForm = new FormGroup({
      username : new FormControl(''),
      fullname: new FormControl(''),
      gender: new FormControl(''),
      phone: new FormControl(''),
      email: new FormControl(''),
      address: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      pincode: new FormControl(''),
      apartments: new FormControl('')
    });
   }


  ngOnInit(): void {
    this.actRoute.paramMap.subscribe(params =>{
      this.aid = params.get('aid');
    });
    this.accountService.getOneAccount(this.aid).subscribe(data=>{
      this.account = data;
      this.accountForm = new FormGroup({
        username : new FormControl(this.account.username,Validators.required),
        fullname: new FormControl(this.account.fullname,Validators.required),
        gender: new FormControl(this.account.gender,Validators.required),
        phone: new FormControl(this.account.phone,Validators.required),
        email: new FormControl(this.account.email,Validators.required),
        address: new FormControl(this.account.address,Validators.required),
        city: new FormControl(this.account.city,Validators.required),
        state: new FormControl(this.account.state,Validators.required),
        pincode: new FormControl(this.account.pincode,Validators.required),
        apartments: new FormControl(this.account.apartments,Validators.required)
      });
    });
  }

  OnAccountFormSubmit(){
    let acc : Account = {
      id : +this.aid,
      username : this.accountForm.value.username,
      fullname : this.accountForm.value.fullname,
      gender : this.accountForm.value.gender,
      phone : this.accountForm.value.phone,
      email : this.accountForm.value.email,
      address : this.accountForm.value.address,
      city : this.accountForm.value.city,
      state : this.accountForm.value.state,
      pincode : this.accountForm.value.pincode,
      apartments : this.accountForm.value.apartments,
      

    }
    this.accountService.editAccount(this.aid,acc).subscribe(data=>{
      this.route.navigateByUrl("/account/"+this.aid);
    },
    (err: any) =>{
      console.log(err);
    });

}
}