Angular2表单重置，在表单重置后取消选中广播或提交

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

Answer 1

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 .

Answer 2

>=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