How to get data from input field inside a Jquery function in angular?

Question

I want to take the input field value each time a letter is added/changed/deleted so I'm using the jquery to trigger it. but I don't know how to save this value.

in the html:

 <form [formGroup]="searchForm">
    <input id='myTextbox1' type='text'/>
  </form>

in the ts file:

searchString:string;
searchForm: FormGroup;
  ngOnInit(){

    this.searchForm =  new FormGroup({
      'str':new FormControl(null)
    })
    /
  

    $('#myTextbox1').on('input', function() {
    // i tried this:
      this.searchString = this.searchFrom.controls['str'].value
  });

    
  }

but controls weren't read from the form.

I just want to save the value of the input field in the searchstring variable and change it each time it changes. please help me.

user3875919 · Accepted Answer · 2019-11-08 14:59:59Z

1

Rather than using jquery you could update your code as below:

 <form [formGroup]="searchForm">
    <input id='myTextbox1' type='text' formControlName="str"/>
  </form>

and instead of the jquery code you could use the power of Observables:

 this.searchForm.str.valueChanges.subscribe((value) => {
     this.searchString = value;
 });

answered Nov 8, 2019 at 14:59

user3875919

3031 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get data from input field inside a Jquery function in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related