Блог

У меня есть модальная форма начальной загрузки с некоторыми входными данными, которые я хочу очистить, и закрыть модальную форму, если я нажму кнопку отмены. Очевидно, что она будет сброшена, если я обновлю страницу, но я просто хочу иметь возможность вводить некоторые данные в поля формы, нажимать кнопку Отмены и немедленно закрывать модальную форму, затем, как только она будет закрыта, нажмите, чтобы снова открыть модальную форму, и поля формы будут пустыми.

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

FormGroup есть метод, который называется reset() :

 this.modalForm.reset();
  

Вы можете прочитать больше о reset() и FormGroup самом себе в официальной документации Angular 2.