event not rendering by FromControl in angular

Question

I am trying to fetch the single event data by eventclicked function to the HTML using the form-control but its showing the below error.

ERROR Error: Cannot find control with name: 'event'
at _throwError (forms.mjs:3199:11)
at setUpFormContainer (forms.mjs:3181:9)
at FormGroupDirective._setUpFormContainer (forms.mjs:4996:9)
at FormGroupDirective.addFormGroup (forms.mjs:4883:14)
at FormGroupName.ngOnInit (forms.mjs:3732:28)
at callHook (core.mjs:2498:22)
at callHooks (core.mjs:2467:17)
at executeInitAndCheckHooks (core.mjs:2418:9)
at refreshView (core.mjs:11984:21)
at refreshComponent (core.mjs:13043:13)

Let me show you how I applied it.

thats my appcompoonnet class from app.component.ts

export class AppComponent {
  profileForm = this.fb.group({
    title: [''],
    color: [''],
  });
  // @ViewChild('modalContent', { static: true })
  // modalContent!: TemplateRef<any>;
  @ViewChild('modalContent', { read: ViewContainerRef, static: true }) modalContent: ViewContainerRef;

 
  modalData: {
    action: string;
    event: CalendarEvent;
  };

  @Output() eventDelete: EventEmitter<CalendarEvent> = new EventEmitter();
  refresh = new Subject<void>();
  viewDate: Date = new Date();
  view: CalendarView = CalendarView.Month;
  CalendarView = CalendarView;
  getevent: string;
  getcolor: string;
  setView(view: CalendarView) {
    this.view = view;
  }
 
  constructor(private fb: FormBuilder) { }

  events: CalendarEvent[] = [
    {
    
      start: subDays(startOfDay(new Date()), 1),
      end: addDays(new Date(), 1),
      title: '111 An event with no end date',
      color:colors.red
    
      
    },
    {
      start: startOfDay(new Date()),
      end: addDays(new Date(), 2),
      title: '22 An event with 2',
      color:colors.blue
      
    },
    {
      start: subDays(startOfDay(new Date()), 3),
      end: addDays(new Date(), 3),
      title: '333 An event with no end date',
      color:colors.yellow
      
    },

  ]
  

      eventTimesChanged({
        event,
        newStart,
        newEnd,
      }: CalendarEventTimesChangedEvent): void {
        this.events = this.events.map((iEvent) => {
          if (iEvent === event) {
            return {
              ...event,
              start: newStart,
              end: newEnd,
            };
          }
          return iEvent;
        });
        this.handleEvent('Dropped or resized', event);
      }
      
      handleEvent(action: string, event: CalendarEvent): void {
        this.modalData = { event, action };
        //this.modal.open(this.modalContent, { size: 'lg' });
        this.openPopup() 
      }
    
    
      dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
        console.log(date);
        this.view = CalendarView.Day;
        
      }
    
      eventClicked({ event }: { event: CalendarEvent }): void {
        console.log('Event clicked', event.title);
          let title = event.title;
          let color = event.color.secondary
        this.profileForm.patchValue({
          title: title,
          color: color
        })
      
        this.openPopup()
       
       
      }
      deleteEvent(eventToDelete: CalendarEvent) {
        this.events = this.events.filter((event) => event !== eventToDelete);
        console.log("Event deleted");
      }
      displayStyle = "none";
      
      openPopup() {
        this.displayStyle = "block";
      }
      closePopup() {
        this.displayStyle = "none";
      }
    
    }

and here is the app component.html

<mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" 
(eventTimesChanged)="eventTimesChanged($event)" 
(eventClicked)="eventClicked($event)"
[viewDate]="viewDate" 
[events]="events">

</mwl-calendar-week-view>

Heres the form control part

  <form [formGroup]="profileForm">
  <div 
  class="modal"
  tabindex="-1"
  role="dialog"
  [ngStyle]="{'display':displayStyle}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        
      <div class="modal-header">
        <h4>All Events</h4>
      
      
     
          <div class="titleBlock" formGroupName="event">
              <input
              type="text"
              id="title"
              class="form-control"
              formControlName="title"
             
          
            />
            <input
            type="color"
            class="form-control"
            formControlName="color"
         
          />
          
             <!-- <span><i class="bi bi-check2 done" (click)="deleteEvent(event)" ></i></span> -->
   
                
            
        </div>
 
      </div>
      <div class="modal-body">
        <p>One Stop Solution for all CS problems</p>
  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" 
                (click)="closePopup()">
          Close
        </button>
      </div>
    </div>
  </div>
</div>
</form>