Ali Ylmaz

Ali Ylmaz

  • NA
  • 129
  • 11.7k

Angular modal form dropdown default value

Mar 16 2022 5:39 AM

Hi,

I am using datatables in a project. I open it in modal form to update the data. While updating this data, I am pulling the dropdown data.

But when I try to give default data, it doesn't work either. The data I selected is coming in continuously.

I want to give dropdown default value every time I select it. How can I do that.

<div class="modal fade" id="modal-lg" aria-hidden="true" >
  <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">
        <form [formGroup]="UserClaimsEdit" (ngSubmit)="SaveClaims()">
          <div class="card-body">
     
          
            <div class="form-group">
        <label for="exampleInputEmail1">Customer Code</label>
               
     
    <input type="number" class="form-control" [readonly]="true"   formControlName="UserId" placeholder="UserId">   
    <span class="error" style="color: red; font-weight: bold;" *ngIf="UserClaimsEdit.controls['UserId'].hasError('required')
    && UserClaimsEdit.controls['UserId'].touched">Zorunlu</span>
     
            </div>
     
            <div class="form-group">
    <label for="exampleInputEmail1">Yetki</label>
     
     <select class="form-select" aria-label="Default select example" formControlName="OperationClaimId" [(ngModel)]="emSelected">
        
       
        <option *ngFor="let item of ClaimList" [ngValue]="item.OperationClaimId">{{item.name}}</option>
      </select>
  
    
         
            </div>
 
     
          </div>  
     
          
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary float-right">Kaydet
                   
            </button>
          </div>
        </form>
      </div>
    
 
   
 
    </div>
    
  </div>
 
</div>
ClaimList = [
 
    { OperationClaimId: 1, name: "User" },
  { OperationClaimId: 2, name: "Admin" },
]
 
 
 
  UserClaimsEdit= new FormGroup({
    UserId : new FormControl(),
    OperationClaimId : new FormControl()
   
  });
 
 
  UserList:any=[];
  stringifiedData:any;
  parsedJson:any;
  emSelected:any;
 
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<void>();
 
  ngOnInit(): void {
 
    this.getUsers();
   this.emSelected=1;
 
    this.dtOptions={
      pagingType: 'full_numbers',
      pageLength:5,
      lengthMenu:[5,15,25]
   
    };
 
  }
 
  getUsers() 
  { 
    this.service.getUser().subscribe(data=>{ 
      this.UserList=data; 
     this.dtTrigger.next(this.dtOptions);
        
    }); 
  } 

 


Answers (1)