Angular 表单：在 Angular 表单中找不到表单控件

Question

我正在尝试在我的 Angular 表单中设置值，但我收到错误消息“找不到名称为 eDate 的表单控件。在 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 活动，那么我将设置 START TIME 和 END TIME 的值。

我的组件如下所示：

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 DAY 事件（请参阅其他条件）但当我的事件是 ALL DAY 事件时，我在设置“eDate”值时出错。知道我在这里做错了什么吗？？？请帮忙。

Answer 1

在您的 EditEventComponent.ts 中，如果 eDate 通常表示 END DATE，那么对于 all day 事件，您将设置 eDate。您能否确认是否需要为 ALL DAY 事件或不需要为 all Day 事件设置 eDate ？你能确认一下吗