Угловая группа форм и построитель форм

Question

Я создал эту угловую форму, которая работает нормально и в настоящее время добавляет данные в базу данных.

classtime.component.html

<div class="row">
  <div class="col-md-12">
    <nb-card>
      <nb-card-header>Add Class Times</nb-card-header>
      <nb-card-body>
        <form class="form-horizontal" (ngSubmit)="addTimes()" #form="ngForm">
          <div class="form-group row">
            <label for="inputEmail3" class="label col-sm-3 form-control-label">Course</label>
            <div class="col-sm-6">
              <nb-select selected="1" name="name" [(ngModel)]="schedule.course" fullWidth>
                <nb-option *ngFor="let x of courses" [value]="x.name">{{x.name}}</nb-option>
              </nb-select>
            </div>
          </div>
          <div class="form-group row">
            <label for="inputPassword3" class="label col-sm-3 form-control-label">Class Times</label>
            <div class="col-sm-6">
              <input nbInput
              placeholder="Form Picker"
              [nbDatepicker]="formpicker" fullWidth name="date" [(ngModel)]="schedule.date">
              <nb-datepicker #formpicker ></nb-datepicker>
              From
              <nb-select selected="0" name="hour" [(ngModel)]="schedule.hour" style="margin-top: 20px;">
                <nb-option value="0">--</nb-option>
                <nb-option value="1">1</nb-option>
                <nb-option value="2">2</nb-option>
                <nb-option value="3">3</nb-option>
                <nb-option value="4">4</nb-option>
                <nb-option value="5">5</nb-option>
                <nb-option value="6">6</nb-option>
                <nb-option value="7">7</nb-option>
                <nb-option value="8">8</nb-option>
                <nb-option value="9">9</nb-option>
                <nb-option value="10">10</nb-option>
                <nb-option value="11">11</nb-option>
                <nb-option value="12">12</nb-option>
              </nb-select>
              <nb-select selected="1" name="minute" [(ngModel)]="schedule.minute">
                <nb-option value="1">--</nb-option>
                <nb-option value="00">00</nb-option>
                <nb-option value="15">15</nb-option>
                <nb-option value="30">30</nb-option>
                <nb-option value="45">45</nb-option>
              </nb-select>
              <nb-select selected="1" name="timeofday" [(ngModel)]="schedule.timeofday">
                <nb-option value="1">--</nb-option>
                <nb-option value="AM">AM</nb-option>
                <nb-option value="PM">PM</nb-option>
              </nb-select>
              To 
              <nb-select selected="0" name="tohour" [(ngModel)]="schedule.tohour">
                <nb-option value="0">--</nb-option>
                <nb-option value="1">1</nb-option>
                <nb-option value="2">2</nb-option>
                <nb-option value="3">3</nb-option>
                <nb-option value="4">4</nb-option>
                <nb-option value="5">5</nb-option>
                <nb-option value="6">6</nb-option>
                <nb-option value="7">7</nb-option>
                <nb-option value="8">8</nb-option>
                <nb-option value="9">9</nb-option>
                <nb-option value="10">10</nb-option>
                <nb-option value="11">11</nb-option>
                <nb-option value="12">12</nb-option>
              </nb-select>
              <nb-select selected="1" name="tominute" [(ngModel)]="schedule.tominute">
                <nb-option value="1">--</nb-option>
                <nb-option value="00">00</nb-option>
                <nb-option value="15">15</nb-option>
                <nb-option value="30">30</nb-option>
                <nb-option value="45">45</nb-option>
              </nb-select>
              <nb-select selected="1" name="totimeofday" [(ngModel)]="schedule.totimeofday">
                <nb-option value="1">--</nb-option>
                <nb-option value="AM">AM</nb-option>
                <nb-option value="PM">PM</nb-option>
              </nb-select>
            </div>      
          </div>
          <div class="form-group row">
            <div class="offset-sm-3 col-sm-9">
              <button type="submit" nbButton status="primary">Add Time</button>
            </div>
          </div>
        </form>
      </nb-card-body>
    </nb-card>
  </div>
</div> 

Но теперь мне нужно использоватьгруппы форм и конструктора форм, так что если я нажму на кнопку «плюс», откроется другая строка той же формы, как эта . Я пытался следовать учебному пособию, но я не уверен, каким образом я смогу позже связать значения формы со своими свойствами объекта.

файл classtime.component.ts

export class ClasstimesComponent implements OnInit {

  schedule: AddClassTimes = new AddClassTimes();
  courses: CourseDto = new CourseDto();
  position = "bottom-right";

  constructor(private _courseService: CourseServiceProxy,
              private _classService: ClassServiceProxy,
              private toastrService: NbToastrService,) { }

  ngOnInit() {
    this._courseService.GetCourseData()
    .subscribe((result: any) => {
      this.courses = result;
    });
  }

  addTimes() {
    this._classService.ClassTimes(this.schedule)
    .subscribe(() => {
      this.showToast(this.position);
    })
  }

  showToast(position) {
    this.toastrService.show(
      'Data has been added successfully'
    )
  }

}

Вот интерфейс моей модели

export interface IAddClassTimes {
    course: string | undefined;
    date: string | undefined;
    hour: string | undefined;
    minute: string | undefined;
    timeofday: string | undefined;
    tohour: string | undefined
    tominute: string | undefined;
    totimeofday: string | undefined;
}