diff --git a/goldens/size-test.yaml b/goldens/size-test.yaml
index ab4c6b264bc0..baa4c6f5cc9c 100644
--- a/goldens/size-test.yaml
+++ b/goldens/size-test.yaml
@@ -1,3 +1,4 @@
 material/list/nav-list: 130473
 material/radio/without-group: 121448
 material/menu/without-lazy-content: 210751
+material/datepicker/range-picker/without-form-field: 330101
diff --git a/integration/size-test/material/datepicker/range-picker/BUILD.bazel b/integration/size-test/material/datepicker/range-picker/BUILD.bazel
new file mode 100644
index 000000000000..8acc49078791
--- /dev/null
+++ b/integration/size-test/material/datepicker/range-picker/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "without-form-field",
+    file = "without-form-field.ts",
+    deps = ["//src/material/datepicker"],
+)
diff --git a/integration/size-test/material/datepicker/range-picker/without-form-field.ts b/integration/size-test/material/datepicker/range-picker/without-form-field.ts
new file mode 100644
index 000000000000..e894be528a96
--- /dev/null
+++ b/integration/size-test/material/datepicker/range-picker/without-form-field.ts
@@ -0,0 +1,30 @@
+import {Component, NgModule} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+
+/**
+ * Basic component using `MatDateRangePicker` with `MatDatepickerToggle`. Form fields
+ * are optionally used in combination with the date-range input, so we expect that to
+ * be tree-shaken away in this example. Similarly the standard datepicker input directive
+ * should be omitted.
+ */
+@Component({
+  template: `
+    <mat-date-range-input [rangePicker]="picker">
+      <input matStartDate>
+      <input matEndDate>
+    </mat-date-range-input>
+    <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+    <mat-date-range-picker #picker></mat-date-range-picker>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatDatepickerModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}
+
+platformBrowser().bootstrapModule(AppModule);
diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts
index 0070bba47479..80dac58902bf 100644
--- a/src/material/datepicker/date-range-input.ts
+++ b/src/material/datepicker/date-range-input.ts
@@ -18,8 +18,9 @@ import {
   ChangeDetectorRef,
   Self,
   ElementRef,
+  Inject,
 } from '@angular/core';
-import {MatFormFieldControl, MatFormField} from '@angular/material/form-field';
+import {MatFormFieldControl, MatFormField, MAT_FORM_FIELD} from '@angular/material/form-field';
 import {ThemePalette, DateAdapter} from '@angular/material/core';
 import {NgControl, ControlContainer} from '@angular/forms';
 import {Subject, merge} from 'rxjs';
@@ -206,7 +207,7 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
     private _elementRef: ElementRef<HTMLElement>,
     @Optional() @Self() control: ControlContainer,
     @Optional() private _dateAdapter: DateAdapter<D>,
-    @Optional() private _formField?: MatFormField) {
+    @Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField) {
 
     if (!_dateAdapter) {
       throw createMissingDateImplError('DateAdapter');