0

I'm using radio buttons to display 2 options to the user, and based on their selection, they are routed to one of two components (one for each radio button). Any advice/ links on how to route to the desired destination based on their radio selection.

Template:

<app-radio-button
     formControlName="collectionOption"
     [groupName]="'collectionOption'"
     [radioOptions]="radioOptions$ | async"
></app-radio-button>

Ts file: 

ngOnInit() {
    this.form = this.formBuilder.group({
      collectionOption: ['', Validators.compose([Validators.required])],
    });

    this.form.valueChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
      if (this.form.valid) {
        this.showGlobalError = false;
      }
    });
  }

  onContinueClick() {
    this.isSubmitted = true;

    if (this.form.valid || this.form.controls.collectionOption.value === this.postCard) {
       this.router.navigateByUrl(this.radioOptionOneRoute);  
    } else {
      this.showGlobalError = true;
    }
  }
Simon C
  • 3
  • 3
  • You are passing a collection of `radioOptions` to your app radio button component. I'd add a `url` property to your `radioOption` object. When `onContinueClick` is called use `.find(...)` on the `radioOptions` collection to get the `radioOption` that corresponds to the value the user selected. Pass `radioOption.url` to `this.router.navigateByUrl`. Basically you want it to be data driven – Noremac Oct 10 '19 at 21:13
  • so in the radioOptions object I have added url: `url: routeOne` to each collection. can you advise on how the `find` may look on onContinueClick? any advice would be really appreciated! – Simon C Oct 10 '19 at 21:30

0 Answers0