Angular2 form reset, uncheck radios after form reset or submit

Question

How to reset form in ng2, I allready use method form.reset(), but after reset I have still checked checkboxes on form. Question is, how can I uncheck checkboxes in form?

<form #f="ngForm" [formGroup]="taskCreate" (submit)="onSubmit(taskCreate)">
          <fieldset class="form-group">
            <label for="goal">Cel: </label>
            <select name="goal" class="form-control" formControlName="goal" ngControl="goal">
                <option *ngFor="let goal of goals" [value]="goal.key" [selected]="key === 'first'">{{ goal.value }}</option>
            </select>
            <div class="alert alert-danger" *ngIf="this.formValid.goalErr">You must select a goal.</div>
          </fieldset>

          <fieldset class="form-group">
            <label for="p">Priorytet:</label>
            <div name="p">
              <input class="priority" style="display: table-cell; vertical-align: text-bottom;" type="radio" value="PML" name="priority" formControlName="priority">
              <img style="margin-right: 5px;" [src]="this.minustwo" alt="minustwo" />
              <input class="priority" style="display: table-cell; vertical-align: text-bottom;" type="radio" value="PL" name="priority" formControlName="priority">
              <img style="margin-right: 5px;" [src]="this.minusone" alt="minusone" />
              <input class="priority" style="display: table-cell; vertical-align: text-bottom;" type="radio" value="PN" name="priority" formControlName="priority">
              <img style="margin-right: 5px;" [src]="this.zero" alt="zero" />
              <input class="priority" style="display: table-cell; vertical-align: text-bottom;" type="radio" value="PH" name="priority" formControlName="priority">
              <img style="margin-right: 5px;" [src]="this.plusone" alt="plusone" />
              <input class="priority" style="display: table-cell; vertical-align: text-bottom;" type="radio" value="PMH" name="priority" formControlName="priority">
              <img style="margin-right: 5px;" [src]="this.plustwo" alt="plustwo" />
            </div>
            <div class="alert alert-danger" *ngIf="this.formValid.priorityErr">You must select a priority.</div>
          </fieldset>

          <fieldset class="form-group">
            <label for="note">Uwagi do zadania:</label>
            <textarea maxlength="2000" class="form-control" name="note" rows="8" cols="40" formControlName="note"></textarea>
          <div class="alert alert-danger" *ngIf="this.formValid.noteErr">You must draw a note.</div>
          </fieldset>
[...]

TS:

constructor(private appService: AppService, public cartBox: CartBox, public attachments: AttachmentList, private elementRef: ElementRef, private renderer: Renderer) {
        super();

        this.taskCreate = new FormGroup({
            goal: new FormControl("", Validators.required),
            prodCodeList: new FormControl("", Validators.required),
            note: new FormControl("", Validators.required),
            priority: new FormControl("", Validators.required),
            attachmentList: new FormControl("")
        });

Regards! Bosper

score 3 · Accepted Answer · answered Jan 13 '17 at 01:23

3

You may have to reset each form control.

form.reset() can take an object comprised of all formcontrols. Since you haven't posted how you are using form.reset, try the below.

For example, try something like:

this.taskCreate.reset({
goal: '',
prodCodeList: '',
note: '',
priority: '',
attachmentList: ''
})

This should reset each formcontrol you have, which means they will be untouched and pristine.

Docs here.

answered Jan 13 '17 at 01:23

m.chiang

185
1
8

In my case, form.reset is reseting all form controls, but doesnt uncheck onlu radio button. The value is null and unchouched, – Uland Nimblehoof Jan 20 '17 at 08:37

score 0 · Answer 2 · edited May 23 '17 at 12:18

>=RC.6

In RC.6 it should be supported to update the form model. Creating a new form group and assigning to myForm

[formGroup]="myForm"

will also be supported (https://github.com/angular/angular/pull/11051#issuecomment-243483654)

>=RC.5

form.reset();

In the new forms module (>= RC.5) NgForm has a reset() method and also supports a forms reset event. https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<=RC.3

This will work:

onSubmit(value:any):void {
  //send some data to backend
  for(var name in form.controls) {
    (<Control>form.controls[name]).updateValue('');
    /*(<FormControl>form.controls[name]).updateValue('');*/ this should work in RC4 if `Control` is not working, working same in my case
    form.controls[name].setErrors(null);
  }
}

ref:How to clear form after submit in Angular 2

Angular2 form reset, uncheck radios after form reset or submit

2 Answers2