Reset Radio Button Value to Zero on Form Reset in Angular 6

Question

I have repetitive Form, where I need to show the text box and radio button and always radio button should be to bind to '0' or on NO button. On form reset, I am trying to set the radio button back to 0 but it is not binding, here is the code,

Radion Button.ts

import {
  Component,
  ViewChild
} from '@angular/core';


/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  date = 0;
  questionLevel = {
    others: [{
      date: 0
    }],
  }
  dates = [{
      key: "Yes",
      value: 1
    },

  ]
  constructor() {
    if (this.date === 0) {
      this.dates.push({
        key: "No",
        value: this.date
      })
    }
  }
  @ViewChild('form') myNgForm;
  addMore(item, other) {
    console.log(other, "others")
    item.others.push({
      date: 0,
    });
    console.log(item.others, "item atfre add new button")
  }
  SubmitForm(formValues) {
    this.myNgForm.resetForm();
    if (this.date === null) {
      this.dates.splice(1, 1)
      this.dates.push({
        key: "No",
        value: this.date
      })
    }
  }
}

Radio Button.html

<form class="example-form" #form="ngForm" (ngSubmit)="SubmitForm(form)">
  <div *ngFor="let other of questionLevel.others; let i = index ">
    <div class="row">
      <div class="col-sm-6">
        <h6 class="catTitle">Question Title </h6>
      </div>
      <div class="col-sm-6">
        <mat-form-field class="textField">
          <textarea required id="#myDiv" name="other_question_{{i}}" [(ngModel)]="other.question" matInput placeholder="Question Title"></textarea>
          <mat-error>Question field is required</mat-error>
        </mat-form-field>
        <!-- <div *ngIf="other.plus" class="error-danger">Question field is required</div> -->
      </div>
    </div>


    <div class="row radio_row">
      <div class="col-sm-6">
        <h6 class="catTitle">Requires Date</h6>
      </div>
      <div class="col-sm-6 radio_btn">
        <mat-radio-group name="other_date_{{i}}" [(ngModel)]="other.date" required>
          <div class="radio_single" *ngFor="let date of dates">
            <mat-radio-button [value]="date.value">
              {{date.key}}
            </mat-radio-button>
          </div>
        </mat-radio-group>
      </div>
    </div>
  </div>
  <div class="form-group">
    <button type="button" (click)="addMore(questionLevel,questionLevel.others)" class="primary-button">Add
              More Questions</button>
  </div>
  <button type="submit" [disabled]="!form.valid" mat-raised-button class="primary-button" color="primary">Submit</button>
</form>


<!-- Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

Above is the code for the button to set the value back to zero for all repetitive form.

Below is the link for the running code.

https://stackblitz.com/edit/angular-ehrv3c-tqsztj

please help me to solve this

Answer 1

So my first suggestion is to clean up the logic a little bit. You should add the second 'No' option to your initialisation of the dates object:

dates = [{
    key: "Yes",
    value: 0
},
{
  key: "No",
  value: 1
}

Then you need to have a selectedDate variable so that you can actually keep track of which date has been selected by the user.

selectedDate = {};

You should be using ngOnInit as opposed to the constructor lifecycle method, where you can then initialise the selectedDate field.

ngOnInit() {
  this.selectedDate = this.dates.find((date) => {
    return date.key === 'No';
  });
}

Finally, you can update your selected option to the default you require once the form has been submitted.

SubmitForm(formValues){
   this.myNgForm.resetForm();     
    this.selectedDate = this.dates.find((date) => {
    return date.key === 'No';
  });
}

One last thing, update the way your ngModel value on the html side so that the selectedDate variable is now being bound correctly.

<mat-radio-group name="other_date_{{i}}" [(ngModel)]="selectedDate" required>
              <div class="radio_single" *ngFor="let date of dates">
                <mat-radio-button [value]="date">
                  {{date.key}}
                </mat-radio-button>

Here is the updated link for the code you provided: https://stackblitz.com/edit/angular-ehrv3c-ybdx2m?file=app%2Ftable-basic-example.html.

Answer 2

you need to set the questionlevel again after submitting... something like this..

restart(){
  this.questionLevel = {
        others: [{
            date: 0
        }
        ],
    }}

constructor(){
        if (this.date === 0) {
            this.dates.push({ key: "No", value: this.date })
        }
        this.restart();

    }

   SubmitForm(formValues){
      console.log(this.myNgForm);
       this.myNgForm.resetForm();     
        if (this.date === null) {
            this.dates=[];
            this.dates.push({ key: "No", value: this.date })
        }
        this.restart();

    }