Angular2表單重置，在表單重置后取消選中廣播或提交

Question

如何在ng2中重置表單，我已經使用了form.reset（）方法，但是重置后我仍然選中了表單上的復選框。 問題是，如何取消選中表單中的復選框？

<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("")
        });

問候！ 博斯珀

Answer 1

您可能必須重置每個窗體控件。

form.reset（）可以接受一個由所有formcontrol組成的對象。 由於尚未發布如何使用form.reset，請嘗試以下操作。

例如，嘗試以下操作：

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

這將重置您擁有的每個FormControl，這意味着它們將保持原狀。

文檔在這里 。

Answer 2

> = RC.6

在RC.6中，應支持更新表單模型。 創建一個新的表單組並分配給myForm

[formGroup]="myForm"

也將被支持（ https://github.com/angular/angular/pull/11051#issuecomment-243483654 ）

> = RC.5

form.reset();

在新的表單模塊（> = RC.5）中， NgForm具有reset()方法，並且還支持表單reset事件。 https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

這將起作用：

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);
  }
}

參考： 在Angular 2中提交后如何清除表格