Angular Forms: Cannot find form control in Angular Forms

Question

I ma trying to set values inside my angular form and I am getting error as "Cannot find form control with name : eDate. at FormGroup._throwIfControlMissing (forms.js:5225)".

My form html looks like this:

<form class="kt-form add-form" name="editEvent" #editEvent="ngForm" (ngSubmit)="openDialog(editEvent)" id="kt_login_form">
    <div class="row">
        <div class="form-group col-md-12">
            <label>Event Title</label>
            <input class="form-control" ngModel #title="ngModel" type="text" placeholder="Set title for event" name="title" autocomplete="off" required/>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-12">
            <label>All Day</label>
            <input class="form-control" ngModel #allDay="ngModel" type="checkbox" name="allDay" id="allDay" autocomplete="off" 
            [(ngModel)]="theCheckbox"  data-md-icheck (change)="toggleVisibility($event)"/>
        </div>
    </div>
    <div class="row" *ngIf="!marked">
        <div class="form-group col-md-12">
            <label>Start Date/Time</label>
            <input class="form-control" ngModel #startTime="ngModel" type="datetime-local" placeholder="Set start date & time" name="startTime" id="startTime" autocomplete="off" min="2020-01-01T00:00:00" max="2030-12-31T00:00:00" required/>
        </div>
        <div class="form-group col-md-12">
            <label>End Date/Time</label>
            <input class="form-control" ngModel #endTime="ngModel" type="datetime-local" placeholder="Set end date & time" name="endTime" id="endTime" autocomplete="off" required/>
        </div>
    </div>
    <div class="row" *ngIf="marked">
        <div class="form-group col-md-12">
            <label>Event Date</label>
            <input class="form-control" ngModel #eDate="ngModel" type="date" placeholder="Set event date" name="eDate" id="eDate" autocomplete="off" required/>
        </div>
    </div>
</form>

Please note that here, I have two DIV's that are based on condition. So if my event is an ALL DAY event, I am just setting the event date inside the form and if my event is NOT AN ALL DAY event, then I am setting the values of START TIME and END TIME.

My component looks like this:

import { Component, OnInit, ViewChild } from '@angular/core';
import { AuthService } from '../auth/auth.service';
import { Router, ActivatedRoute } from '@angular/router';
import { NgForm } from '@angular/forms';
import * as moment from 'moment';

@Component({
  selector: 'app-edit-event',
  templateUrl: './edit-event.component.html',
  styleUrls: ['./edit-event.component.css']
})
export class EditEventComponent implements OnInit {
  @ViewChild('editEvent', null) editEvent: NgForm;
  user: firebase.User;
  id: any;
  marked: boolean;

  constructor(
    private auth: AuthService, 
    private router: Router, 
    private actRoute: ActivatedRoute
  ) {
    this.id = this.actRoute.snapshot.paramMap.get('id');
    this.auth.getEvent(this.id).valueChanges().subscribe(res => {

        if(res.allDay == true) {
        this.marked = true;
        this.editEvent.setValue({
          title: res.title,
          allDay: res.allDay,
          eDate: moment(new Date(res.startTime)).format('YYYY-MM-DD'),
          startTime: '',
          endTime: ''
        });
      } else {
        this.editEvent.setValue({
          title: res.title,
          allDay: res.allDay,
          startTime: moment(new Date(res.startTime)).format('YYYY-MM-DDTHH:mm'),
          endTime: moment(new Date(res.endTime)).format('YYYY-MM-DDTHH:mm'),
          allDay: ''
        });
      }
    });
  }
}

I am able to successfully set my form values, when the event is NOT AN ALL DAY event (see else condition) but when my event is ALL DAY event, I am getting error while setting "eDate" value. Any idea what am I doing wrong here??? Please help.

Answer 1

In your EditEventComponent.ts, if eDate means END DATE in general, then for all day event you are setting eDate. Can you confirm if you need eDate to be set for ALL DAY event or not all Day event ? Can you confirm on this