1

I've got a pre populated form with gps coordinates and I am trying to search a database.




<form>

<mat-toolbar  color="primary">

  <mat-toolbar-row style="justify-content: center;" id="test">  Yonder   </mat-toolbar-row>
 <br>


  <mat-toolbar-row style="justify-content: center;">  <input id="geoSearch" type="text" value="{{coords}}">  </mat-toolbar-row>
  <mat-toolbar-row style="justify-content: center;">    <button type="submit" class="subMitButton" id="location-button" mat-raised-button onclick="window.location.reload();" color="accent"> Locate </button>   </mat-toolbar-row>


</mat-toolbar>
<br>


</form>

and my backend code


app.get('/api/animals',(req, res, next) => {

Animal.find({})
.then(documents => {
  res.status(200).json({
    message: 'success',
    animals: documents
  });
});

How can I send the data from the form to be used in the find query?

Thanks!

HMCS
  • 35
  • 2

1 Answers1

0

Use HttpClient to make the request to your endpoint. In this case you could have something like:

public response: any;

constructor(private readonly http: HttpClient) {}

public makeRequest(): void {
  this.http.get('XXXXXXXXX/api/animals').subscribe((response) => {
    this.response = response;
    // console.log(response)
  })
}

Where XXXXXXXXXXXX is your api base url (probably something like http://localhost:3000)

James Begg
  • 132
  • 3
  • Thanks! I get the idea of using the http request but how do I capture the data I enter in the search field? – HMCS Jul 06 '20 at 20:54
  • 1
    @HMCS in that case you need to use something like a `formControl` on the input field to grab the value of the field. Make sure you have added `ReactiveFormsModule` to imports in you `App.Module.ts` file, and then on your component use ``. In the ts file add a variable `public myControl: FormControl = new FormControl('')` and now all you need to access the value in the input is `this.myControl.value`. Hope this helps – James Begg Jul 07 '20 at 13:58