html - გამორთეთ Bootstrap მოდალური ფორმა, როდესაც მოდალის შიგნით კლიკდება გაუქმების ღილაკი

მაქვს 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();
}
}

პასუხი #1

FormGroup-ს აქვს მეთოდი, სახელად reset():

this.modalForm.reset();

შეგიძლიათ უფრო მეტი წაიკითხოთ reset() და FormGroup-ის შესახებ Angular 2-ის ოფიციალურ დოკუმენტაციაში.