Angular Формы: не удается найти элемент управления формы в Angular Формах

Question

Я пытаюсь установить значения внутри формы angular и получаю сообщение об ошибке: «Не удается найти элемент управления формы с именем: eDate. At FormGroup._throwIfControlMissing (forms. js: 5225)».

Моя форма html выглядит следующим образом:

<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>

Обратите внимание, что здесь у меня есть два DIV, которые основаны на условии. Поэтому, если мое событие является событием ALL DAY, я просто устанавливаю дату события внутри формы, а если мое событие НЕ является событием ALL DAY, тогда я устанавливаю значения времени начала и окончания.

Мой компонент выглядит следующим образом:

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: ''
        });
      }
    });
  }
}

Я могу успешно установить значения моей формы, когда событие НЕ является событием ALL ALL DAY (см. Условие else), но когда мое событие является событием ALL DAY, я ошибка при установке значения «eDate». Есть идеи, что я здесь делаю неправильно ??? Пожалуйста, помогите.

Answer 1

В вашем EditEventComponent.ts, если eDate в целом означает END DATE, тогда для события весь день вы устанавливаете eDate . Можете ли вы подтвердить, нужно ли устанавливать eDate для события ALL DAY или не для всего дня? Можете ли вы подтвердить это