CODEWITHSUNDEEP
angular
Da Mike
Da Mike

Reputation: 463

Angular 9: Submit form to another component

I'm making a application which is like a simplified veision of booking.com where users search for available rooms at a location they want.

So I have the SearchComponent, which presents to the user a nice form (prompting them to enter when and where they want to travel), and once they submit the form, I want to sent these data and redirect to the ResultsComponent, which takes them and them gets from the backend all the rooms that satisfy the user's criteria, and finally presents them to the user in a nice grid system.

The only problem I have, is how to make the communication bewteen SearchComponent and ResultsComponent. In my mind it's kind of simple but for some reason I can't seem to do it. Just submit the form from SearchComponent to ResultsComponent, read the post data from ResultsComponent and proceed. But it seems like I don't know how to do that.

Also, when testing different stuff, I noticed that not even the simplest form works as expected in Angular. That is,

<form action="/results">
  <input type="text" id="location"><br>
  <input type="text" id="date"><br><br>
  <input type="submit" value="submit">
</form>

does not redirect to /results when I click submit. And even if it worked, I'm not sure how to read the post data from the ResultsComponent. Note that I'm using Angular 9.

I'm stuck and I don't know how to proceed... Any help would be really appreciated!

Upvotes: 0

Views: 896

Answers (1)

Sherif Elmetainy
Sherif Elmetainy

Reputation: 4482

I think it is better not to post data but rather have them in the query. For example, submitting the form would navigate to /results?location=xyz&date=2020-09-09. This is common way used by many websites that have search functionality and has benefit that search URL can be shared with others, or you can have direct link to search results from other websites.

In this case you can simply use Router.navigate. Your search component can be like:

export class SearchComponent {
    public searchForm = new FormGroup({
        location: new FormControl(''),
        date: new FormControl(''),
    });

    constructor(private readonly router: Router) {}

    goToResults() {
        const queryParams = this.searchForm.value;
        this. router.navigate(['/', 'results'], {
            queryParams
        });
    }
}

Your form can be like:

<form [formGroup]="searchForm">
   <input type="text" id="location" formControlName="location"><br>
   <input type="text" id="location" formControlName="date"><br>
   <button (click)="gotoResults()">Submit</button>
</form>

Your results component can be like:

export class ResultsComponent implements OnInit {
    constructor(private readonly activatedRoute: ActivatedRoute) { }
    
    ngOnInit() {
        this.activatedRoute.queryParams.subscribe((query) => {
             const location = query.location;
             const date = query.date;
             // Do whatever with location and date values here
        });
    }

}

Upvotes: 2

Related Questions