有没有办法创建一个包含多个组件的 Angular HTTP Post Requested？

Question

尝试为我的 Angular 应用程序创建一个发布请求，但是，可以创建一个包含三个不同组件的发布请求。其中两个组件是 Angular Material（mat-date-range-input 和 mat-checkbox），另一个组件是 ngx timepicker.

alarm.componet.html

<!-- Date Range Selector -->
<div class="daterange">
  <p>Select a date range</p>
  <mat-form-field appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [rangePicker]="picker">
      <input matStartDate placeholder="Start date">
      <input matEndDate placeholder="End date">
    </mat-date-range-input>
    <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
  </mat-form-field>
</div>
<br>
<br>

<!--Days of the Week Selector -->
<section class="week" [formGroup]="week" >
    <p class="prompt">Select when you would like your alarm to be active:</p>
    <p><mat-checkbox name="sunday" >Sunday</mat-checkbox></p>
    <p><mat-checkbox name="monday">Monday</mat-checkbox></p>
    <p><mat-checkbox name="tuesday">Tuesday</mat-checkbox></p>
    <p><mat-checkbox name="wednesday">Wednesday</mat-checkbox></p>
    <p><mat-checkbox name="thursday">Thursday</mat-checkbox></p>
    <p><mat-checkbox name="friday">Friday</mat-checkbox></p>
    <p><mat-checkbox name="saturday">Saturday</mat-checkbox></p>
  </section>

<!-- Alarm Time Picker -->
<div class="timepicker">
<mat-form-field>
   <mat-label>Time</mat-label>
  <input
    matInput
    aria-label="default time"
    [ngxTimepicker]="defaultValue"
    [(ngModel)]="time"
  />
  <button type="submit">Submit</button>
  <button type="button">Reset</button>
  <ngx-material-timepicker #defaultValue>
  </ngx-material-timepicker>
</mat-form-field>
</div>

alarm.componet.ts

import {Component, OnInit} from '@angular/core';
import {Form, FormBuilder} from '@angular/forms';
import {HttpClient} from "@angular/common/http";
import {FormGroup, FormControl} from '@angular/forms';

@Component({ selector: 'app-alarm',
  templateUrl: './alarm.component.html',
  styleUrls: ['./alarm.component.css']
})

export class AlarmComponent {
  time: string = '';
    week = this._formBuilder.group ({
    sunday: false,
    monday: false,
    tuesday: false,
    wednesday: false,
    thursday: false,
    friday: false,
    saturday: false
  })
  range = new FormGroup({
    start: new FormControl<Date | null>(null),
    end: new FormControl<Date | null>(null),
  });

  constructor(private _formBuilder: FormBuilder) {}
}