Reactive Modal Form Update Angular

Last Reply 3 days ago By dharmendr

Posted 3 days ago

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();  
  }  
  
}  

 

You are viewing reply posted by: dharmendr 3 days ago.