名称为“startTime”和“endTime”的表单控件没有值访问器

问题描述

app.module 有

import { TimepickerModule,TimepickerConfig } from 'ngx-bootstrap/timepicker';
import { getTimepickerConfig  } from './TimepickerConfig';

imports: [
  BsDatepickerModule.forRoot(),TimepickerModule.forRoot(),],providers: [
 { provide: TimepickerConfig,useFactory: getTimepickerConfig }
]

HTML

<form [formGroup]="addProjectForm">
   <div class="row">
      <div class="col-sm-6">
         <div class="form-group">
            <label>Start Time</label>
            <timepicker formControlName="startTime" ></timepicker>
         </div>
      </div>
      <div class="col-sm-6">
         <div class="form-group">
            <label>End Time</label>
            <timepicker formControlName="endTime" ></timepicker>
         </div>
      </div>
   </div>

ts

this.addProjectForm = this.formBuilder.group({
   startTime:[Date,[Validators.required]],endTime:["",[Validators.required]]
});

this.startTime = new Date();

解决方法

看起来像 FormsModule 和 ReactiveFormsModule`

import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { TimepickerModule,TimepickerConfig } from 'ngx-bootstrap/timepicker';
import { getTimepickerConfig  } from './TimepickerConfig';

imports: [
  BsDatepickerModule.forRoot(),TimepickerModule.forRoot(),FormsModule,ReactiveFormsModule,],

通常错误 No value accessor for form control ... 表示与响应式表单指令（例如 formControlName、formControl）一起使用的组件不知道如何处理响应式表单指令。>