当使用Angular 2和Formly时,可以通过自定义模板来改变输入日期的"type="格式。以下是一种方法:
<ng-template #customDateTemplate let-formControl let-index="index">
<input type="text" [formControl]="formControl" [id]="'datepicker-' + index" [ngClass]="{'is-invalid': formControl.invalid && formControl.touched}">
</ng-template>
{
key: 'dateField',
type: 'date',
templateOptions: {
label: 'Date',
type: 'text',
template: this.customDateTemplate
}
}
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
@Component({
selector: 'app-form',
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<formly-form [form]="form" [fields]="fields"></formly-form>
<button type="submit">Submit</button>
</form>
`,
})
export class FormComponent {
form = new FormGroup({});
fields: FormlyFieldConfig[] = [
{
key: 'dateField',
type: 'date',
templateOptions: {
label: 'Date',
type: 'text',
template: this.customDateTemplate
}
}
];
customDateTemplate = `
<ng-template #customDateTemplate let-formControl let-index="index">
<input type="text" [formControl]="formControl" [id]="'datepicker-' + index" [ngClass]="{'is-invalid': formControl.invalid && formControl.touched}">
</ng-template>
`;
onSubmit() {
// 处理表单提交逻辑
}
}
这样,你就可以通过自定义模板来改变输入日期的"type="格式了。请注意,以上示例中使用的是ngx-formly库来处理表单渲染,你可以根据自己的需求选择适合的表单库或自行实现表单渲染逻辑。
领取专属 10元无门槛券
手把手带您无忧上云