פקדים ב-Reactive forms

export class ZimunTorim{
  constructor(private fb: FormBuilder){}

  zimunTorimForm = this.fb.group({
    clinicDetails: this.fb.group({
      clinicCity: [''],  // select
      clinicBranch: [''] // select after city select
    }),

    doctorDetails: this.fb.group({
      doctorType: [''], // radio buttons
      doctorDays: ['']  // checkbox
    }),

    patientDetails: this.fb.group({
      patientName: [''],    // textbox
      patientDob: [''],     // calendar
      patientPhone: [''],   // mask
      patientComments: [''] // textarea
    })
  });
}

<div class="container my-5">
  <h1>Angular Clinic</h1>
  <form [formGroup]="zimunTorimForm" (ngSubmit)="submit()">
    <div formGroupName="clinicDetails">
      <h3>Clinic Details</h3>

    </div>

    <div formGroupName="doctorDetails">
      <h3>Doctor Details</h3>

    </div>

    <div formGroupName="patientDetails">
      <h3>Patient Details</h3>

    </div>
    <button class="btn btn-primary" type="submit" 
        [disabled]="!zimunTorimForm.invalid"></button>
  </form>
</div>

<div formGroupName="patientDetails">
  <h4>Patient Details</h4>
  <div class="col-md-3">
    <label for="patientName" class="form-label">Patient Name</label>
    <input type="text" formControlName="patientName" id="patientName" class="form-control">
  </div>
</div>

div formGroupName="doctorDetails" class="my-3">
  <h4>Doctor Details</h4>
  <div class="form-check">
    <label for="doctorType">Doctor Type:</label>
        <div>
          <input id="doctorTypeHeart" type="radio" value="heart" 
            name="doctorType" formControlName="doctorType" 
            class="form-check-input">
          <label for="doctorTypeHeart" class="form-check-label">Heart</label>
        </div>

        <div>
          <input id="doctorTypeEyes" type="radio" value="eyes" 
              name="doctorType" formControlName="doctorType" 
              class="form-check-input">
          <label for="doctorTypeEyes" class="form-check-label">Eyes</label>
        </div>
  </div>
</div>

<div>
  <input id="doctorTypeHeart" type="radio" value="heart"
      name="doctorType" formControlName="doctorType"
      class="form-check-input"
      (change)="changeDoctorType($event)">
  <label for="doctorTypeHeart" class="form-check-label">Heart</label>
</div>

changeDoctorType(e){
    console.log(e.target.value);
}

submit(){
    console.log(this.zimunTorimForm.value);
}

checkboxData: Array<any> = [
    { name: 'Sunday', value: 'sunday' },
    { name: 'Monday', value: 'monday' },
    { name: 'Tuesday', value: 'tuesday' },
    { name: 'Wednesday', value: 'wednesday' },
    { name: 'Thursday', value: 'thursday' }
];

doctorDetails: this.fb.group({
      doctorType: [''], // radio buttons
      doctorDays: this.fb.array([])  // checkbox
}),

onCheckboxChange(e) {
    let doctorDays: FormArray = this.zimunTorimForm.get('doctorDetails').get('doctorDays') as FormArray;

    if (e.target.checked) {
      doctorDays.push(new FormControl(e.target.value));
    } else {
      const index = doctorDays.controls.findIndex(x => x.value === e.target.value);
      doctorDays.removeAt(index);
    }
}

<div class="form-check">
  <label for="doctorDays"><strong>Doctor Days:</strong></label>

  <div class="form-group">
    <div *ngFor="let data of checkboxData">
      <label>
        <input type="checkbox" [value]="data.value"
        (change)="onCheckboxChange($event)"
        class="form-check-input"/>
        {{data.name}}
      </label>
    </div>
  </div>
</div>

selectData: Array<any> = [
    { name: 'Tel Aviv', value: 3 },
    { name: 'Beer Sheva', value: 2 },
    { name: 'Jerusalem', value: 4 },
    { name: 'Haifa', value: 1 },
];

<div class="col-md-3">
        <label for="patientName" class="form-label">City </label>
        <select formControlName="clinicCity" class="form-select">
          <option [ngValue]="null" disabled>Choose your city</option>
          <option *ngFor="let data of selectData" [ngValue]="data">
           {{ data.name }}
          </option>
        </select>
</div>

multiSelectData: Array<any> = [
    { name: 'Hashalom', value: 34 },
    { name: 'hagolan', value: 42 },
    { name: 'Ramon', value: 4 },
    { name: 'Keshet', value: 15 },
];

<div class="col-md-3">
        <label for="clinicBranch" class="form-label">Branch </label>
        <select multiple formControlName="clinicBranch" class="form-select">
          <option *ngFor="let data of multiSelectData" [ngValue]="data">
           {{ data.name }}
          </option>
        </select>
</div>