Javascript 角度：找不到名为“日期”的控件

我正在创建一个表单，用户在其中选择日期并填写表单，然后对表单进行限制，以下是我所拥有的。作为参考，我使用

calendar component.ts：

import { Component, OnInit, forwardRef, Input, ElementRef, ViewChild } from '@angular/core';
import { IgxCalendarComponent, IgxDialogComponent } from 'igniteui-angular';
import {  NgModel, FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CalendarComponent), multi: true }
  ]
})
export class CalendarComponent implements ControlValueAccessor, OnInit {
  @ViewChild('calendar') public calendar: IgxCalendarComponent;
  @ViewChild('alert') public dialog: IgxDialogComponent;
  @Input()
  label: string;


  private _theDate: string;

  constructor() { }

  propagateChange = (_: any) => { };
  onTouched: any = () => { };

  writeValue(obj: any): void {
    console.log('writeValue => obj : ', obj);
    if (obj) {
      this._theDate = obj;
    }
  }

  registerOnChange(fn: any): void {
    this.propagateChange = fn;
    console.log('registerOnChange => fn : ', fn);
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
    console.log('registerOnTouched => fn : ', fn);
  }

  get theDate() {
    console.log('get theDate()');
    return this._theDate;
  }

  set theDate(val) {
    console.log('set theDate(val) - val => ', val);
    this._theDate = val;
    this.propagateChange(val);
  }
  public verifyRange(dates: Date[]) {
    if (dates.length > 5) {
      this.calendar.selectDate(dates[0]);
      this.dialog.open();
    }
  }
  ngOnInit() {

  }
}

calender.html

<div class="sample-wrapper">
    <div class="sample-content">
        <!-- Single selection mode -->
        <article class="sample-column calendar-wrapper">
            <igx-calendar></igx-calendar>
        </article>

    </div>
</div>

Booking.component.ts更新

Booking.component.html

<div class="row about-booking">
    <flash-messages></flash-messages>
    <form [formGroup]="angForm" class="form-element">
      <div class="col-sm-4 offset-sm-2 about-booking_calendar">
        <div class="form-group form-element_date">
          <app-calendar formControlName="date" [(ngModel)]="theDate" #date></app-calendar> 
        </div>
      </div>
      <div class="col-sm-4 about-booking_form">
        <div class="form-group form-element_email">
          <input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
        </div>
        <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['email'].errors.required">
            Email is required.
          </div>
        </div>
        <div class="input-group mb-3 form-element_city">
          <select class="custom-select" id="inputGroupSelect01" #cityName>
            <option selected *ngFor="let city of cities" [ngValue]="city.name">{{city.name}}</option>

          </select>
        </div>
        <div class="input-group mb-3 form-element_hotel">
          <select class="custom-select" id="inputGroupSelect01" #hotelName>
            <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name">{{hotel.name}}</option>

          </select>
        </div>
        <div class="form-group">
          <button type="submit" (click)="addReview(date.value, email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
            [disabled]="!validEmail">Book</button>
        </div>
      </div>
    </form>
  </div>

提交数据时，出现以下错误：

BookingComponent.html:59错误：找不到名为的控件： “日期”

---

我的代码有什么问题

在createForm函数中，您没有添加date FormControl

createForm() {
  this.angForm = this.fb.group({
    email: new FormControl('', [Validators.required, Validators.email]),
    date: new FormControl('') // this line missing in your code
  });
}

---

您不应该在同一输入中同时使用ngModel模板驱动表单和formControlName被动表单。

在我的例子中，FormGroup中的所有字段都出现了相同的错误，原因是没有收到来自服务器的数据，html UI代码试图执行被动表单，因此出现了错误。因此，为了解决这个问题，我必须对表单元素使用*ngIf条件，并在服务器响应完成之前停止表单的呈现

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()" *ngIf="userProfile != undefined">

---

尝试使用name=date或声明一个名为date的控件。您在哪里创建了表单？如果使用formControlName=date引用相同的控件，则它应该有一个FormControl for date。使用[ngModel]或反应式表单方法，不要两者混合。Hii@sabithpocker检查更新，我忘记添加预订。ts，现在added@PrashantPimpale这没有帮助，：您没有在表单组中的任何位置定义日期…现在感谢您的帮助没有那个错误，我有另一个简单的错误，错误的请求，这里我有一把小提琴为后端和服务，我用，你能检查它为什么我得到坏的要求

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()" *ngIf="userProfile != undefined">