Loading
Reactive Modal Form Update Angular  
  •           
  •        
  •         
  •   
  •   
  •   
  •   
  •         
  •   
  • class="modal fade" id="modal-lg" aria-hidden="true" style="display: none;">  
  •   class="modal-dialog modal-lg">  
  •     class="modal-content">  
  •       class="modal-header">  
  •         class="modal-title">Large Modal  
  •         "button" class="close" data-bs-dismiss="modal" aria-label="Close">  
  •           "true">×  
  •           
  •         
  •       class="modal-body">  
  •           
  •             
  •   
  •             
  •         
  •       class="modal-footer justify-content-between">  
  •         "button" class="btn btn-default" data-bs-dismiss="modal">Close  
  •         "submit" [disabled]="kisiForm.invalid"  class="btn btn-primary float-right">Register  
  •                 
  •           
  •         
  •       
  •       
  •     
  •     
  •   
  •   
  •                   
  •   
    •  
     
    1. import { Component, OnDestroy, OnInit, Input } from '@angular/core';  
    2. import { FormControl, FormGroup, Validators } from '@angular/forms';  
    3. import { Subject } from 'rxjs';  
    4. import { HttpClient } from '@angular/common/http';  
    5. import { SharedService } from 'src/app/shared.service';  
    6.   
    7. @Component({  
    8.   selector: 'app-show-users',  
    9.   templateUrl: './show-users.component.html',  
    10.   styleUrls: ['./show-users.component.css']  
    11. })  
    12. export class ShowUsersComponent implements OnInit,OnDestroy {  
    13.   
    14.   kisiForm= new FormGroup({  
    15.     CustomerCode: new FormControl('',[Validators.required ]),  
    16.     email: new FormControl('',[Validators.required, Validators.email ]),  
    17.     password: new FormControl('',[Validators.required ]),  
    18.     firstName: new FormControl('',[Validators.required ]),  
    19.     lastName: new FormControl('',[Validators.required ])  
    20.   });  
    21.   
    22.   constructor(private service: SharedService) { }  
    23.   
    24.   UsersList:any=[];  
    25.   
    26.   @Input()    
    27.   dep:any;  
    28.    
    29.   dtOptions: DataTables.Settings = {};  
    30.   dtTrigger: Subject = new Subject<void>();  
    31.   
    32.   Activate:boolean=false;  
    33.   
    34.   ngOnInit(): void {  
    35.   this.getUsers();  
    36.      
    37.   this.dtOptions={  
    38.     pagingType: 'full_numbers',  
    39.     pageLength:5,  
    40.     lengthMenu:[5,15,25]  
    41.   
    42.   
    43.   };  
    44.       
    45.   }  
    46.   
    47.   
    48.   getUsers()    
    49.   {    
    50.     this.service.getUser().subscribe(data=>{    
    51.       this.UsersList=data;    
    52.      this.dtTrigger.next(this.dtOptions);  
    53.          
    54.     });    
    55.   }    
    56.   
    57.   editClick(val:any)  
    58.   {  
    59.       
    60.     this.service.getUserId(this.kisiForm.value.id).subscribe(data=>{    
    61.       this.UsersList=data;    
    62.      this.dtTrigger.next(this.dtOptions);  
    63.          
    64.     });   
    65.   }  
    66.   
    67.     
    68.   
    69.    
    70.   ngOnDestroy(): void {  
    71.     this.dtTrigger.unsubscribe();  
    72.   }  
    73.   
    74. }  
  • Sachin Singh

    Sachin SinghPosted Nov 25, 2021, 6:52 AM

    follow this
    https://itnext.io/creating-forms-inside-modals-with-ng-bootstrap-221e4f1f5648