CODEWITHSUNDEEP
javascriptjqueryangular
AliAb
AliAb

Reputation: 569

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

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.

Upvotes: 0

Views: 54

Answers (1)

user3875919
user3875919

Reputation: 303

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;
 });

Upvotes: 1

Related Questions