Update data (record) using Reactive Modal Form in Angular

Hi everyone,

I want to update data in modal popup in angular. But I am using reactive forms. I couldn't find an example of this. I am sharing my code. What should I do in this situation?

I can't share my code, it gives an error. It doesn't even say what's wrong.

Component.html

<app-header></app-header>  
<div class="content-wrapper" style="min-height: 1299.69px;">  
<section class="content">  
<div class="container-fluid">  
    <div class="card" style="margin-top: 100px;">  
        <div class="card-header">  
          <h3 class="card-title">DataTable with minimal features & hover style</h3>  
        </div>  
        <!-- /.card-header -->  
        <div class="card-body">  
            <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">                            
              <div class="row"> 
        <table id="example2" aria-describedby="example2_info" class="table table-striped table-bordered table-sm row-border hover"   
            datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">  
            <thead>  
            <tr role="row">  
                <th>CustomerId</th>  
                <th>Customer Code</th>                  
                <th>Email</th>  
                <th>Customer FirstName</th>                  
                <th>Status</th>  
                <th>Customer LastName</th>  
                <th>Create Date</th>  
                <th>Updated Date</th>  
                <th></th>  
            </tr>  
            </thead>  
            <tbody>              
            <tr *ngFor="let dataItem of UsersList">  
                <td>{{dataItem.id}}</td>  
                <td>{{dataItem.customerCode}}</td>  
                <td>{{dataItem.email}}</td>  
                <td>{{dataItem.firstName}}</td>  
                <td>{{dataItem.status}}</td>  
                <td>{{dataItem.lastName}}</td>  
                <td>{{dataItem.createDate}}</td>  
                <td>{{dataItem.updateDate}}</td>  
                <td>  
                  <button type="button" class="btn btn-primary" (click)="editClick(dataItem)" data-bs-toggle="modal" data-bs-target="#modal-lg">  
                    Düzenle  
                  </button>  
                </td>                 
            </tr>          
        </tbody>            
    </table> 
    </div>
            </div>  
        </div>  
       
      </div>  
</div>  
</section>  
</div>  
<div class="modal fade" id="modal-lg" aria-hidden="true" style="display: none;">  
  <div class="modal-dialog modal-lg">  
    <div class="modal-content">  
      <div class="modal-header">  
        <h4 class="modal-title">Large Modal</h4>  
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">  
          <span aria-hidden="true">×</span>  
        </button>  
      </div>  
      <div class="modal-body">          
          <app-add-edit-users>  
          </app-add-edit-users>  
      </div>  
      <div class="modal-footer justify-content-between">  
        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>  
        <button type="submit" [disabled]="kisiForm.invalid"  class="btn btn-primary float-right">Register  
        </button>  
      </div>  
    </div>  
    <!-- /.modal-content -->  
  </div>  
  <!-- /.modal-dialog -->  
</div>         
<app-footer></app-footer>  

Component.ts

import { Component, OnDestroy, OnInit, Input } from '@angular/core';  
import { FormControl, FormGroup, Validators } from '@angular/forms';  
import { Subject } from 'rxjs';  
import { HttpClient } from '@angular/common/http';  
import { SharedService } from 'src/app/shared.service';  
@Component({  
  selector: 'app-show-users',  
  templateUrl: './show-users.component.html',  
  styleUrls: ['./show-users.component.css']  
})  
export class ShowUsersComponent implements OnInit,OnDestroy {  
  
  kisiForm= new FormGroup({  
    CustomerCode: new FormControl('',[Validators.required ]),  
    email: new FormControl('',[Validators.required, Validators.email ]),  
    password: new FormControl('',[Validators.required ]),  
    firstName: new FormControl('',[Validators.required ]),  
    lastName: new FormControl('',[Validators.required ])  
  });  
  
  constructor(private service: SharedService) { }  
  
  UsersList:any=[];  
  
  @Input()    
  dep:any;  
   
  dtOptions: DataTables.Settings = {};  
  dtTrigger: Subject<any> = new Subject<void>();  
  
  Activate:boolean=false;  
  
  ngOnInit(): void {  
      this.getUsers();
      this.dtOptions={  
          pagingType: 'full_numbers',  
          pageLength:5,  
          lengthMenu:[5,15,25]
      };
  } 
  
  getUsers()    
  {    
    this.service.getUser().subscribe(data=>{    
      this.UsersList=data;    
      this.dtTrigger.next(this.dtOptions);         
    });    
  }    
  
  editClick(val:any)  
  {      
    this.service.getUserId(this.kisiForm.value.id).subscribe(data=>{    
      this.UsersList=data;    
      this.dtTrigger.next(this.dtOptions);          
    });   
  } 
  ngOnDestroy(): void {  
    this.dtTrigger.unsubscribe();  
  }    
}