How to update the value of a radio group, when changing another radio group?

问题

Hi have two radio groups, and i want the values to update when i change one of the radio group value, beause they are both conected.

If i change the first radio group value, i want the second radio group to update.

HTML:

<ion-radio-group [(ngModel)]="cardOrderNumber" (ionChange)="updateCardOrdersNumber($event)">
      <ion-list-header>
        <ion-label>{{'component.loyaltyCard.numberOfOrdersNeeded' | translate}}</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>6</ion-label>
        <ion-radio slot="start" color="success" [value]="6"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>8</ion-label>
        <ion-radio slot="start" color="success" [value]="8"></ion-radio>
      </ion-item>
    </ion-radio-group>

 <ion-radio-group (ionChange)="updateCardTittle($event)">
      <ion-list-header>
        <ion-label>{{'component.loyaltyCard.cardTitle' | translate}}</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Encomende {{cardOrderNumber +1}} pague {{cardOrderNumber}}</ion-label>
        <ion-radio slot="start" color="success" value="Encomende {{cardOrderNumber +1}} pague {{cardOrderNumber}}"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Pague {{cardOrderNumber}} receba 1 grátis</ion-label>
        <ion-radio slot="start" color="success" value="Pague {{cardOrderNumber}} receba 1 grátis"></ion-radio>
      </ion-item>
    </ion-radio-group>

ts:

  updateCardOrdersNumber(number1){
    this.cardOrderNumber = number1.detail.value;
    this.cardSquareArray.length = this.cardOrderNumber;
    this.orderRow1.length = this.cardOrderNumber / 2;
    this.orderRow2.length = this.cardOrderNumber / 2;
  }

  updateCardTittle(tittle){
    this.cardTittle = tittle.detail.value;
  }

if i change the value of the first radio group, i want the second group value to be updated, because the text of the second group changes when the first radio group value changes.

WHat is the logic that i have to do to update when the first group changes?

回答1:

You don't really need to bind the control using ngModel if you are going to handle the ionChange event.

Please take a look at this stackblitz project

In that demo I'm creating the options of the second group once the user selects an option of the first group, based on the selected option:

Component:

// ...

public selectedOption: number;
  public selectedSuboption: number;

  public options = [
    {
      label: "2 items",
      value: 2
    },
    {
      label: "3 Items",
      value: 3
    }
  ];

  public suboptions = [];

  public updateSelectedOption(event: CustomEvent): void {
    const selectedOption = event.detail.value;

    // Clear existing suboptions
    this.suboptions = [];

    for (let i = 0; i < selectedOption; i++) {
      this.suboptions.push({
        label: `Item ${i + 1}`,
        value: i + 1
      });
    }

    this.selectedOption = selectedOption;
  }

  public updateSelectedSuboption(event: CustomEvent): void {
    this.selectedSuboption = event.detail.value;
  }

// ...

Template:

    <ion-list>
      <ion-radio-group (ionChange)="updateSelectedOption($event)">
        <ion-list-header>
          <ion-label>
            Items
          </ion-label>
        </ion-list-header>

        <ion-item *ngFor="let option of options">
          <ion-label>{{ option.label }}</ion-label>
          <ion-radio [value]="option.value"></ion-radio>
        </ion-item>
      </ion-radio-group>
    </ion-list>

    <ng-container *ngIf="selectedOption">
      <ion-list>
        <ion-radio-group (ionChange)="updateSelectedSuboption($event)">
          <ion-list-header>
            <ion-label>
              Showing {{ selectedOption }} items
            </ion-label>
          </ion-list-header>

          <ion-item *ngFor="let option of suboptions">
            <ion-label>{{ option.label }}</ion-label>
            <ion-radio [value]="option.value"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
    </ng-container>

来源：https://stackoverflow.com/questions/64369438/how-to-update-the-value-of-a-radio-group-when-changing-another-radio-group