从 Angular Reactive Form 中检索日期值

Question

我在我的 Angular 组件中创建了一个响应式表单，我想用它从用户那里检索日期范围。

HTML

<form [formGroup]="dateRangeForm" (submit)="onSubmit(f)" #f>
            <div class="card-block">
                <div class="form-group">
                    <label for="start-date">Start Date: </label>
                    <input id="start-date"
                           type="date"
                           class="form-control"
                           formControlName="startDate"/>
                </div>
                <div class="form-group">
                    <label for="end-date">End Date: </label>
                    <input id="end-date"
                           type="date"
                           class="form-control"
                           formControlName="endDate">
                </div>
                <div class="card-footer separator">
                    <input type="submit" value="Search">
                </div>
            </div>
        </form>

TypeScript

 this.dateRangeForm = this.formBuilder.group({
      startDate: [ new Date(), Validators.required ],
      endDate: [ new Date(),Validators.required ],
    });

对于我的提交表单，我尝试从表单控件中检索数据，如下所示。

onSubmit(form: FormGroup) {
    var startDate:string  = form.controls["startDate"].getRawValue();
    var endDate:string  = form.controls["endDate"].value;
  }

但是，当我这样做时，我在开发工具控制台中得到以下

TypeError

，并且我不明白为什么如果我在 FormGroup 的

group()

方法中声明了表单控件。我尝试将

startDate

和

endDate

的数据类型更改为字符串，但遇到了同样的错误。

core.mjs:6362 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[CaseErrorsDashboardService -> CaseErrorsDashboardService -> CaseErrorsDashboardService]: 
  NullInjectorError: No provider for CaseErrorsDashboardService!
NullInjectorError: R3InjectorError(AppModule)[CaseErrorsDashboardService -> CaseErrorsDashboardService -> CaseErrorsDashboardService]: 
  NullInjectorError: No provider for CaseErrorsDashboardService!
    at NullInjector.get (core.mjs:8990:1)
    at R3Injector.get (core.mjs:9157:1)
    at R3Injector.get (core.mjs:9157:1)
    at R3Injector.get (core.mjs:9157:1)
    at ChainedInjector.get (core.mjs:21488:1)
    at lookupTokenUsingModuleInjector (core.mjs:3289:1)
    at getOrCreateInjectable (core.mjs:3334:1)
    at ɵɵdirectiveInject (core.mjs:10306:1)
    at NodeInjectorFactory.CasesAndErrorsDashboardComponent_Factory [as factory] (ɵfac.js:1:1)
    at getNodeInjectable (core.mjs:3519:1)
    at resolvePromise (zone.js:1262:1)
    at resolvePromise (zone.js:1216:1)
    at eval (zone.js:1329:1)
    at _ZoneDelegate.invokeTask (zone.js:443:1)
    at Object.onInvokeTask (core.mjs:26299:1)
    at _ZoneDelegate.invokeTask (zone.js:442:1)
    at Zone.runTask (zone.js:214:1)
    at drainMicroTaskQueue (zone.js:632:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:529:1)
    at invokeTask (zone.js:1727:1)

Answer 1

尝试将 CaseErrorsDashboardService 添加到您的提供商 例如在 AppModule 中 添加这个：

providers: [CaseErrorsDashboardService ]