Enable Angular button when radio is selected-CodePudding

I'm trying to enable a button when either one of two radio buttons have been selected. I have the button defaulted to disabled with both of the radios defaulted to being unselected. The button should become enabled when either one of the radios has been selected. How can I do this? Here is my HTML:

    <input
          id="regions"
          name="distribution"
          type="radio"
          (change)="toggleSelectedDistribution()"
        />
        <label
          for="regions"
          >
          {{ 'budgetOnboarding.welcomeScreen.regionsDistribution' | i18next }}
        </label>
      </div>
      <div>
        <input
          id="individual_account"
          name="distribution"
          type="radio"
          (change)="toggleSelectedDistribution()"
        />
        <label
          for="individual_account">
          {{ 'budgetOnboarding.welcomeScreen.individualDistribution' | i18next }}
        </label>
      </div>
    </div>
    <div>
      <button
        type="button"
        id="beginButton"
        (click)="beginWizard()"
        disabled
      >
        {{ 'budgetOnboarding.welcomeScreen.begin' | i18next }}
      </button>

Here is my ts:

import { ChangeDetectorRef, Component, EventEmitter, Output } from '@angular/core';

import { DEFAULT_WELCOME_STEPS } from '../../constants';
import { BudgetHierarchy } from '../../enumerations';
import { ProgramBudgetFacade } from '../../facades';

@Component({
  selector: 'app-welcome-screen',
  templateUrl: './welcome-screen.component.html'
})
export class WelcomeScreenComponent {
  @Output() public readonly onScreenChange = new EventEmitter<boolean>();

  public steps: string[] = [...DEFAULT_WELCOME_STEPS];
  public isRegionHierarchy = true;

  constructor(
    private readonly _changeDetectorRef: ChangeDetectorRef,
    private readonly _budgetFacade: ProgramBudgetFacade
  ) {}

  public toggleSelectedDistribution(): void {
    this.isRegionHierarchy = !this.isRegionHierarchy;

    this.isRegionHierarchy
      ? (this.steps = [...DEFAULT_WELCOME_STEPS])
      : this.steps.splice(2, 2, 'budgetOnboarding.welcomeScreen.accountThirdStep');

    this._changeDetectorRef.detectChanges();
  }

  public beginWizard(): void {
    const budgetHierarchy = this.isRegionHierarchy ? BudgetHierarchy.regions : BudgetHierarchy.none;
    this.onScreenChange.emit(this.isRegionHierarchy);
    this._budgetFacade.setBudgetHierarchy({ budgetHierarchy });
  }
}

CodePudding user response：

<input #radio1
      id="regions"
      name="distribution"
      type="radio"
      (change)="toggleSelectedDistribution()"
    />
    <label
      for="regions"
      >
      {{ 'budgetOnboarding.welcomeScreen.regionsDistribution' | i18next }}
    </label>
  </div>
  <div>
    <input #radio2
      id="individual_account"
      name="distribution"
      type="radio"
      (change)="toggleSelectedDistribution()"
    />
    <label
      for="individual_account">
      {{ 'budgetOnboarding.welcomeScreen.individualDistribution' | i18next }}
    </label>
  </div>
</div>
<div>
  <button
    type="button"
    id="beginButton"
    (click)="beginWizard()"
    [disabled]="!(radio1.checked || radio2.checked)"
  >
    {{ 'budgetOnboarding.welcomeScreen.begin' | i18next }}
  </button>

CodePudding user response：

Use a variable an ngModel, not use "a toogle". Check how all is more "natural"

<input [(ngModel)]="isRegionHierarchy " [value]="true"
    id="regions" name="distribution" type="radio"
/>
<input [(ngModel)]="isRegionHierarchy" [value]="false"
    id="regions" name="distribution" type="radio"
/>
<!--when you use "steps" you can to have some like-->
<div *ngFor="let step of (isRegionHierarchy?stepsOne:stepsTwo)>
   {{step}}
</div>
<button [disabled]="isRegionHierarchy===undefined">button</button>

You define in .ts

isRegionHierarchy:any;
stepsOne=[...DEFAULT_WELCOME_STEPS]
stepsTwo=this.steps.splice(2, 2,'budgetOnboarding.welcomeScreen.accountThirdStep')

See how using three variables you needn't write any code in .ts. See also how is easy understand the .html

NOTE: Is necesary the [ in [value] because else your variable gets the strings "true" or "false" not the boolean value true/false