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

Ionic Framework
1

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

2

Have you considered using reactive forms here?

3

I’m stuck on a similar problem and am unfamiliar with this version of Ionic. How would reactive forms resolve this issue? Could you explain with code because there seems to be an issue with using formGroup in Ionic.

Thanks

4

By pulling a lot of the logic that OP had in their template into the controller. I am generally suspicious of ngFor index tracking, because historically I have found myself redesigning away from it later on.

Specifically, the initial question was asking “how do I reset a form?”, and that becomes super-easy.

Tough for me to say much without knowing what issue you’re talking about, but:

  • I haven’t ever encountered one
  • You don’t need to use formGroup to use reactive forms. In fact, you don’t even have to have a <form> element if you don’t want to