Bootstrap custom-file-label is not changing after uploading file in angular app

Question

I am working on Angular application in which I'm validating a form using bootstrap validator, I want to validate a file(image) input field. The problem is after applying validations in model.ts file if I upload the file, it does not change the label to filename for e.g. image.png it stays to Choose File which is hardcoded. If I remove validations the label changes to file name as expected.

model.ts

public class className{
   public image:File;
   
   public validatorOptions?:{
      image:{
        validators:{
          callback:{
            callback:(validator,$field,options)=>{
              return{
                 valid:this.image!=undefined,
                 message:'upload an image'
               }
            }
          }
        }
      }
     }
   }
}

index.html

            <div class="form-group">
                    <label class="control-label"> Upload Image: </label>
                    <div class="row" style="margin:0px 0px 30px 0px;">  
                        <div class="custom-file col-md-11">
                            <input type="file" class="custom-file-input" id="image" name="image" [(ngModel)]="sendData.image"  (change)="fileValidation();fileSizeValidation()" (change)="fileChangedEvent($event.target.files)">
                            <label class="custom-file-label mt-0" for="image">Choose file</label>                           
                        </div>
                    </div>
                </div>