Редактировать / обновить реактивную форму, используя угловую и огненную базу

Question

Я пытаюсь отредактировать / обновить форму из другого представления по elementId.

employee-list.comonent.ts (представление 2):

 onEdit(empId:string){
this._router.navigate(['/RegisterEmployee',empId]);
//this.service.formData=Object.assign({},emp);
 }

при нажатии она перемещаетсяв другое представление с идентификатором выбранного элемента, но как я могу заполнить данные формы из базы данных выбранного элемента и обновить отредактированные данные в базе данных firebase

employee.component.ts (view 1) -Reactive-Form

 ngOnInit() {
//this.resetForm();
this.form = this.formBuilder.group({
  fullName:new FormControl('',[Validators.required,Validators.pattern('[a-zA-Z][a-zA-Z ]+')]),
  designation: new FormControl('',[Validators.required,Validators.pattern('[a-zA-Z][a-zA-Z ]+')]),
  Email: new FormControl('',[Validators.required, Validators.email]),
  mobile: new FormControl('',[Validators.required, Validators.pattern('[0-9]*'),Validators.minLength(10),Validators.maxLength(10)])
});
 }

 /* submit the data to be added into database having 'employees' as the data 
 collection array*/
 onSubmit():void{
console.log(this.form.value);
this.router.navigateByUrl('/EmployeeList');
let data = Object.assign({},this.form.value);
if(this.form.value.id == null)
this.firestore.collection('employees').add(data);
else
this.firestore.doc('employees/'+this.form.value.id).update(data);
//this.resetForm(this.form);
this.toastr.success('Submitted successfully','Employee Register');
 }

И мой сервис для того же, что и ниже: employee.service.ts

import { Injectable } from '@angular/core';
import { Employee } from './employee.model';
import { AngularFirestore } from '@angular/fire/firestore';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
formData : Employee;

constructor(private firestore:AngularFirestore) { }

/*Function to get added employees list from firebase database*/
getEmployees(){
let listOfEmployees = 
 this.firestore.collection('employees').snapshotChanges();
 return listOfEmployees;
  }
   }

Мой интерфейс для формы: employee.model.ts

export class Employee {
id : string;
fullName: string;
Email: string;
mobile: string;
designation :string;
}

Помогите пожалуйста с этим (новичок в angular и мой первый проект с использованием firebase).

вот репозиторий git для рабочего приложения https://github.com/HusnaKhanam/MyApplication

Answer 1

Если я правильно понимаю, вот основные шаги для заполнения формы данными:

В компоненте сотрудника:

1) Считайте идентификатор из параметра url, подобного этому:

  ngOnInit() {
    const param = this.route.snapshot.paramMap.get('id');
    if (param) {
      const id = +param;
      this.getProduct(id);
    }
  }

(ПРИМЕЧАНИЕ. Это мой код, вам необходимо изменить его для вашего конкретного сценария.)

2) Получить данные из службы, аналогичные приведенным ниже:

  getProduct(id: number): void {
    this.productService.getProduct(id)
      .subscribe(
        (product: Product) => this.displayProduct(product),
        (error: any) => this.errorMessage = <any>error
      );
  }

3) Обновите данные в форме, используя код, подобный следующему:

  displayProduct(product: Product): void {
    this.product = product;

    // Update the data on the form
    this.productForm.patchValue({
      productName: this.product.productName,
      productCode: this.product.productCode,
      starRating: this.product.starRating,
      description: this.product.description
    });
  }