对于模板驱动表单，如何使用Angular Material中的date-range-input控件进行日期范围选择的技术性首先在组件中引入FormsModule和MatDateRangeInputModule，然后在HTML模板中使用mat-date-range-input指令和[(ngModel)]绑定双向数据绑定属性。示例代码如下：

1.在组件中引用FormsModule和MatDateRangeInputModule

import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatDateRangeInputModule } from '@angular/material/datepicker';

@NgModule({ imports: [ FormsModule, MatDateRangeInputModule ], exports: [ FormsModule, MatDateRangeInputModule ] }) export class SharedModule { }

2.在HTML模板中使用mat-date-range-input指令和[(ngModel)]绑定双向数据绑定属性

3.定义FormControl和maxDate属性

import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; import { DateAdapter } from '@angular/material/core'; import { MomentDateAdapter } from '@angular/material-moment-adapter';

@Component({ selector: 'date-range-picker', templateUrl: 'date-range-picker.component.html', styleUrls: ['date-range-picker.component.css'] }) export class DateRangePickerComponent {

date = new FormControl();

maxDate = new Date();

constructor(private adapter: DateAdapter) {
    this.adapter.setLocale('en-US');
}

}

经过以上改造，我们就可以在模板驱动表单中使用Angular Material中的date-range-input控件实现日期范围选取功能。