Angular 4 Reset status form - forms

Question

I have a modal with a form, and some required fields.
When I open the modal I correctly see the fields empty, if I write something in the field required and then I cancel the words writed I correctly see the field as invalid.
The problem is that if I close and reopen the modal I want to see the empty fields like if it's the first time I open it but for some reason I see the previous invalid status also if I reset the form.
This is my modal after I close it, it seems that the status never be resetted:
<form #modelForm="ngForm">
<div class="modal-body" *ngIf="checkpoint">
<div class="row">
<div class="form-group label-floating">
<label class="control-label">{{'checkpoint.table.dialog.labels.name'
| translate }}<span class="star">*</span>
</label> <input class="form-control" id="name" name="name" required
[(ngModel)]="checkpoint.name" #name="ngModel" /><small
[hidden]="name.valid || name.pristine" class="text-danger">
{{'checkpoint.table.validations.required' | translate }}</small>
</div>
</div>
<div class="row">
<div class="form-group label-floating">
<label class="control-label">{{'checkpoint.table.dialog.labels.passStockAlert'
| translate }}</label> <input pattern="[0-9]*"
class="form-control" name="passStockAlert"
id="passStockAlert"
[(ngModel)]="checkpoint.passStockAlert"
#checkPoint="ngModel" /><small
[hidden]="checkPoint.valid || checkPoint.pristine"
class="text-danger">
{{'checkpoint.table.validations.invalid' | translate }}</small>
</div>
</div>
<div class="row">
<div class="category form-category">
<span class="star">*</span> {{ 'form.requiredfields' |
translate }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info btn-round"
(click)="save();resetForm(modelForm)" data-dismiss="modal"
[disabled]="modelForm.form.invalid || modelForm.form.pristine"
label="Save">{{'checkpoint.table.dialog.save' |
translate }}</button>
<button type="button" class="btn btn-danger btn-round"
(click)="resetForm(modelForm)" data-dismiss="modal">{{'checkpoint.table.dialog.close' |
translate }}</button>
</div>
</form>
And this is my reset form method:
resetForm(myForm: NgForm) {
myForm.form.reset();
}

Answer 1

I have successfully implemented this:
my-component.html
<form (ngSubmit)="resetFormFlags(myForm)" #myForm="ngForm">
<h4> title </h4>
<button type="submit"> btnText</button>
</form>
my-component.ts
resetFormFlags(myForm: any) {
myForm.reset();
}
Hope it helps!

Answer 2

Try like this below code :
<form name="modelForm" role="form" novalidate (ngSubmit)="resetForm(modelForm)" #modelForm="ngForm">
<div class="modal-body" *ngIf="checkpoint">
<div class="row">
<div class="form-group label-floating">
<label class="control-label">{{'checkpoint.table.dialog.labels.name'
| translate }}<span class="star">*</span>
</label>
<input class="form-control" id="name" name="name" required [(ngModel)]="checkpoint.name" />
<small [hidden]="!(modelForm.controls.name?.dirty && modelForm.controls.name?.invalid)" class="text-danger">
{{'checkpoint.table.validations.required' | translate }}
</small>
</div>
<button class="btn btn-primary" [disabled]="modelForm.form.invalid" type="submit">{{'checkpoint.table.dialog.save' | translate }}</button>
<button class="btn btn-white" type="button" (click)="resetForm(modelForm)"> {{'checkpoint.table.dialog.close' | translate }}</button>
</div>
</div>
</form>
componen.ts
resetForm(editForm: NgForm) {
editForm.reset();
}