0

In my application, I need to reset input type radio button on cancel button click in reactive forms.

<form [formGroup]="form1">
<button click="save()">save</button>
<button click="Cancel()">Cancel</button>
<div *ngFor*="let items of itemarray">
<input type = "radio" (change)="onChange()" name="test_{{id}}" id="test_{{id}}">None</input>
<input type = "radio" name="test_{{id}}" id="test_{{id}}">Full</input>
</div>
</form>

in TS file


onChange()
{
this.form1.markasdirty();
}

cancel()
{
this.form1.reset()
this.itemarray = this.originalArry();
}

reset option is not resetting radio button existing value on cancel button. Also assigning fresh data to itemarray but its not reflecting on UI.

I tried below code on cancel button -

this.form1.get(this.form1.value).reset();

here I'm getting this.form1.value as undefine

3
  • Your's inputs are not related with any FormControl (have no formControlName or formControl attribute). Please, edit your question adding how you create the formGroup. BTW, if you have a originalArry be carefully to use a "copy" of the array. If you use, e.g. this.copyArray=this.originalArray you have an unique array, you need make a deep copy: this.copyArray=JSON.parse(JSON.stringify(this.originalArray)); if is an array of objects or simply this.copyArray=[...this.originalArray] if is an array of string/numbers or boolean. Commented Apr 17, 2024 at 6:34
  • @Eliseo - Thanks for comment. I'm creating radio dynamically, so wont be able to use formControlName . I will try with deepcopy, as you suggested. Commented Apr 17, 2024 at 10:12
  • in Angular you have "variables" in .ts and show the values of this variables in .html. when you have an input, you can use "two-ways-binding" (a variable show the value in the input, and when you change the input, the variable change). This way is called template driven forms (aka ngModel). Another way is using reactive Forms Commented Apr 17, 2024 at 10:59

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.