Greetings! I am currently working with Angular TypeScript 12 and I am attempting to trigger a Bootstrap modal popup when I enter a code in the input field and press enter. However, the issue is that the popup is always displayed even without typing anything.
Here is the approach I have taken:
<input (keyup.enter)="Search()" data-toggle="modal" data-target="#exampleModal"
[formControl]="firstNameControl" type="text" >
Here is the code for the popup modal:
<div class="modal" [class.show]="show" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
</div>
</div>
And here is the TypeScript code snippet:
show: boolean = true;
firstNameControl = new FormControl();
code!:string;
ngOnInit(): void {
this.firstNameControl.valueChanges
.pipe(debounceTime(1000))
.subscribe(newValue => {
this.code= newValue
});
showModal() {
this.show = !this.show;
}
Search() {
console.log(this.codeuser);
this.showModal();
}