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

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">&times;</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?