キャンセルボタンをクリックした後のブートストラップモーダルフォームの消去

Question

キャンセルボタンをクリックすると、入力を消去してモーダルを閉じるブートストラップモーダルがあります。私はページをリフレッシュすると明らかにリセットされますが、単にフォームフィールドにデータを入力し、キャンセルボタンをクリックしてモーダルをすぐに閉じることができるようにしたい場合は、閉じてから再度モーダルを開き、フォームフィールドは空白にします。

<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

FormGroupreset()と呼ばれる方法があります。

this.modalForm.reset(); 

あなたはAngular 2 official documentationにreset()とFormGroup自体についての詳細を読むことができます。