У меня есть загрузочный модальный с некоторыми входами, которые я хочу очистить, и у меня модальный закрыть, если я нажму кнопку отмены. Если я обновляю страницу, она будет сброшена, но я просто хочу иметь возможность вводить некоторые данные в поля формы, нажать кнопку «Отмена» и сразу же закрыть мода, а затем, когда она будет закрыта, нажмите, чтобы снова открыть модальный режим и поля формы пустые.Очистить 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();
}
}
безупречный. Прекрасно работает. Спасибо! – Drew13
просто еще один быстрый вопрос ... У меня также есть кнопка «Добавить» прямо над «Отменить». Если я использую метод reset() на этом, он сбрасывает форму, но больше не закрывает модальный. Как я могу заставить его сделать то и другое? Спасибо – Drew13
@ Drew13 Я отредактировал мое сообщение, проверьте его. Если это не сработает, попробуйте изменить 'id =" myModal1 "' на '# myModal1'. –