GovAlta / ui-components

ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
Apache License 2.0
14 stars 23 forks source link

Radio: reset() doesn't work #1974

Open ArakTaiRoth opened 1 week ago

ArakTaiRoth commented 1 week ago

Info

Related issue - #1704

When using the Angular function reset() on a Form Control, the expected behaviour is that the Form Control gets set to a blank state. This does not work with Radio Groups. You can test with the following code:

<goa-form-item label="Input Test" mb="l">
  <goa-input goaValue [formControl]="inputFormCtrl" [value]="inputFormCtrl.value" />
</goa-form-item>
<goa-form-item label="Radio Test" mb="l">
  <goa-radio-group goaValue [formControl]="radioFormCtrl" [value]="radioFormCtrl.value">
    <goa-radio-item value="1" label="Label 1"></goa-radio-item>
    <goa-radio-item value="2" label="Label 2"></goa-radio-item>
    <goa-radio-item value="3" label="Label 3"></goa-radio-item>
  </goa-radio-group>
</goa-form-item>
<br />
<goa-button (_click)="resetForm()">Reset Form</goa-button>
export class InputComponent {
  inputFormCtrl = new FormControl("");
  radioFormCtrl = new FormControl("");

  resetForm() {
    this.inputFormCtrl.reset();
    this.radioFormCtrl.reset();
  }
}

Acceptance Criteria:

  1. Angular's .reset() function should work as expected for the Radio Group
Spark450 commented 3 days ago

@ArakTaiRoth can you touch base and provide more background on this.