Trying to reset multiple selection input using forms reset() not working ionic v6

Hi community! I am new in the developer world, learning as I am going along and looking for some help please. I am using ionic v.6 and helping develop a questionnaire app, currently attempting to clear user inputs on a multiple choice question when a button is activated. I have tried using the standard reset() function capibility for forms but it does not work for my task, nor return any errors. I have previously tried just setting this.questionnaire_responses[this.question_prefix] to null and [] but no joy, currently I have:

HTML file

<!-- Multiple Option -->
<form id="form1">
  <div *ngIf="question_display === 'multi_opt'">
      <ion-list>
        <ion-item *ngFor="let option_names of question_options; let i = index">
          <ion-label class="ion-text-wrap">{{option_names[0]}}</ion-label>
          <ion-radio (click)="multipleOptions(option_names[1])" name="{{prefix}}_{{i}}" [value]="option_names[1]"></ion-radio>
        </ion-item>
      </ion-list>
      </div>
    </form>

<div *ngIf="question_display === 'multi_opt'">
  <ion-button shape="round" (click)="resetButton()">Reset</ion-button>
</div>
<!--/Multiple Option -->

ts file

resetButton() {
       console.log('test'); // is logging the reset button as being pressed
       this.response[this.prefix] = null;//added as was not clearing values 
       document.form1.reset();
}

multipleOptions(opt: any) {
  if (this.response[this.prefix] == undefined) {
     this.response[this.prefix] = [];
    }

  this.response[this.prefix].push(opt);
 }

Any help or input as to what I am missing would be very appreciated

1 post - 1 participant

Read full topic