在 Modal 中单击取消按钮后清除 Bootstrap Modal Form

Question

我有一个 bootstrap 模态，其中有一些我想清除的输入，如果我单击取消按钮，模态将关闭。如果我刷新页面，它显然会重置，但我只是想能够在表单字段中输入一些数据，单击“取消”按钮并立即关闭模态，然后在关闭后单击再次打开模态并让表单字段为空。

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog bodyWidth">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">Add Data Point</h4>
  </div>
  <div class="modal-body">
    <form class="form-inline" [formGroup]="modalForm" (ngSubmit)="submitForm(modalForm.value)">
      <div class="row">
        <div class="form-group" [ngClass]="{'has-error':!modalForm.controls['dataPoint'].valid && modalForm.controls['dataPoint'].touched}">
          <label>Data Point:</label>
          <input class="form-control special" type="text" class="form-control special"  placeholder="Enter a data point" [formControl]="modalForm.controls['dataPoint']">
        </div>
        <div class="form-group" [ngClass]="{'has-error':!modalForm.controls['ICCP'].valid && modalForm.controls['ICCP'].touched}">
          <label >ICCP:</label>
          <input type="text" class="form-control special" placeholder="Enter an ICCP" [formControl]="modalForm.controls['ICCP']">
        </div>
        <div class="form-group" [ngClass]="{'has-error':!modalForm.controls['startDate'].valid && modalForm.controls['startDate'].touched}">
          <label>Start Date:</label>
          <input class="form-control special" type="text" placeholder="Select a start date" [formControl]="modalForm.controls['startDate']" style="margin-right: 4px;">
        </div>
        <div class="form-group" [ngClass]="{'has-error':!modalForm.controls['endDate'].valid && modalForm.controls['endDate'].touched}">
          <label >End Date:</label>
          <input type="text" class="form-control special" placeholder="Enter an end date" [formControl]="modalForm.controls['endDate']">
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <div style="float: left;">*All Fields Are Required</div>
    <button type="submit" class="btn" [disabled]="!modalForm.valid" data-dismiss="modal">Add</button>
    <button type="submit" (click)="resetForm()" class="btn" data-dismiss="modal" ng-click>Cancel</button>
  </div>
</div>

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
 selector: 'add-validation',
 styleUrls: ['../app/app.component.css'],
 templateUrl: 'add.component.html'
})
export class AddComponent {
modalForm : FormGroup;

 constructor(fb: FormBuilder){
   this.modalForm = fb.group({
  'dataPoint' : [null, Validators.required],
  'ICCP' : [null, Validators.required],
  'startDate' : [null, Validators.required],
  'endDate' : [null, Validators.required]
})
console.log(this.modalForm);
this.modalForm.valueChanges.subscribe( (form: any) => {
    console.log('form changed to:', form);
  }
);
}

submitForm(value: any){
  console.log(value);
}

resetForm(){
 this.modalForm = new FormGroup();
}
}

Answer 1

FormGroup 有一个方法叫做 reset():

this.modalForm.reset();

您可以在 Angular 2 official documentation 中阅读有关 reset() 和 FormGroup 本身的更多信息。

在 Modal 中单击取消按钮后清除 Bootstrap Modal Form

Clear Bootstrap Modal Form after cancel button is clicked inside Modal

html

twitter-bootstrap

typescript

angular2-forms

angular