我正在嘗試正式整合角度材料日期選擇器范圍
為此，我正在執行以下操作：
- 我創建了以下正式型別
零件：
@Component({
selector: 'app-formly-datepicker-range-type',
templateUrl: './formly-datepicker-range-type.component.html',
styleUrls: ['./formly-datepicker-range-type.component.scss'],
})
export class FormlyDatepickerRangeTypeComponent extends FieldType<any> {
range = new FormGroup({
start: new FormControl<Date | null>(null),
end: new FormControl<Date | null>(null),
});
}
組件模板：
<mat-form-field class="w-full">
<mat-label>Rango</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start" />
<input matEndDate formControlName="end" />
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
- 正式型別注冊
FormlyModule.forRoot({
types: [
{
name: "datepicker-range",
component: FormlyDatepickerRangeTypeComponent,
wrappers: [],
},
],
})
我使用的新型別如下
在某些組件中
form = new FormGroup({});
model: FilterModel = { category: undefined, criteria: '', range: undefined };
fields: FormlyFieldConfig[] = [
formlyInput({ key: 'criteria', label: 'Criterio', templateOptions: {} }),
formlySelect({
key: 'category',
label: 'Categoría',
templateOptions: {
options: this.categoriesService.getAllToFormly(),
},
}),
{
key: 'range',
type: 'datepicker-range',
templateOptions: {
label: 'Rango de fechas',
},
},
];
在某些組件模板中
<form [formGroup]="form" (ngSubmit)="onSubmit(model)" autocomplete="off">
<formly-form [form]="form" [model]="model" [fields]="fields"></formly-form>
<div class="flex justify-end">
<button type="submit" mat-icon-button>
<mat-icon>filter_alt</mat-icon>
</button>
</div>
</form>
以上正確繪制了表格。對于類別和條件輸入，我正確獲取了值，但對于新 datepicker-range 型別使用的范圍屬性，該值始終未定義。
如何獲取表單模型中日期范圍內的選定值？
提前致謝
uj5u.com熱心網友回復：
訂閱范圍表單組事件并在范圍值變化時設定父表單控制元件
export class FormlyDatepickerRangeTypeComponent extends FieldType<any> {
range = new FormGroup({
start: new FormControl<Date | null>(null),
end: new FormControl<Date | null>(null),
});
constructor() {
super();
this.range.valueChanges.subscribe((v) => this.formControl.setValue(v));
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529108.html
標籤：有角度的角材料有角度的