form.valid on Angular gets false after the 1st submit - html

Question

I am working on Angular 7 and having the following situation:
.html code (updated):
<form #form="ngForm" (ngSubmit)="addRecord(form)">
<div class="modal-header">
<h5 class="modal-title" id="modalRecordLabel">Add Record</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="resetForm(form)">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<small style="margin-top: 10px;">All fields with asterisk (*) are required.</small>
<div class="container-fluid">
<div class="row">
<div class="col-md-10">
<!-- Name -->
<div class="form-group">
<label for="input1">Name *</label>
<input
type="text"
class="form-control"
id="input1"
name="input1"
[(ngModel)]="myObject.description"
required
#input1=ngModel
[class.field-error]="form.submitted && input1.invalid"
tabindex="11">
<div [hidden]="!form.submitted || input1.valid " class="alert alert-danger">
Name is required.
</div>
</div>
<!-- Date 1-->
<div class="form-group">
<label for="date1">Date 1 *</label>
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
id="date1"
name="date1"
[ngModel]="date1"
required
#date1=ngModel
[class.field-error]="form.submitted && date1.invalid"
ngbDatepicker #da="ngbDatepicker"
tabindex="12">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="da.toggle()" type="button"></button>
</div>
</div>
<div [hidden]="!form.submitted || date1.valid " class="alert alert-danger">
Date 1 is required.
</div>
</div>
<!-- Date 2 -->
<div class="form-group">
<label for="date2">Date 2 *</label>
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
id="date2"
name="date2"
[ngModel]="date2"
required
#date2=ngModel
[class.field-error]="form.submitted && date2.invalid"
ngbDatepicker #da2="ngbDatepicker"
tabindex="13">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="da2.toggle()" type="button"></button>
</div>
</div>
<div [hidden]="!form.submitted || date2.valid " class="alert alert-danger">
Date 2 is required.
</div>
</div>
<!--Date 3-->
<div class="form-group">
<label for="date3">Date 3</label>
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
id="date3"
name="date3"
[ngModel]="date3"
ngbDatepicker #da3="ngbDatepicker"
tabindex="14">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="da3.toggle()" type="button"></button>
</div>
</div>
</div>
<!--Date 4-->
<div class="form-group">
<label for="date4">Date 4</label>
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
id="date4"
name="date4"
[ngModel]="date4"
ngbDatepicker #da4="ngbDatepicker"
tabindex="15">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="da4.toggle()" type="button"></button>
</div>
</div>
</div>
<!-- Type -->
<div class="form-group">
<label for="input2">Type</label>
<div class="input-group">
<select
class="form-control"
id="input2"
name="input2"
[(ngModel)]="myObject.type.id"
(change)="selectOption($event.target.value)"
#input2="ngModel"
tabindex="16">
<option *ngFor='let input2 of input2List' [value]="input2.id">{{input2.description}}</option>
</select>
</div>
</div>
</div>
</div>
</div> <!-- closing div for class="container-fluid"-->
</div> <!-- closing div for class="modal-body"-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="resetForm(form)" tabindex="101">Close</button>
<button type="submit" class="btn btn-primary" tabindex="102">Add</button>
</div>
</form>
.ts code:
addRecord(form: NgForm): void {
if(form.valid) {
//do something
}
}
The first time the form is submitted, all the data is saved successfully. However, if I tried to submit a second record using the same form, now form.valid is always false.
So my question is, why is form.valid always false after the first submit?