时间戳

首页 > 解决方案 > 名称为“startTime”和“endTime”的表单控件没有值访问器

angular - 名称为“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();

标签： angulartimebootstrap-4timepicker

解决方案

看起来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）一起使用的组件不知道如何处理响应式表单指令。

推荐阅读