当使用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库来处理表单渲染,你可以根据自己的需求选择适合的表单库或自行实现表单渲染逻辑。
在AngularJS中有很多的服务,常用的比如$http,$location等等。
本篇文章会介绍一下的内容:
1 $http这种Angular提供的服务的使用
2 如何自定义服务,并总结服务需要注意的几个小点。
$http的使用
AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据。
这样就需要使用web容器来运行代码了,先看看程序源码,视图方面还是跟普通的代码相同:
领取专属 10元无门槛券
手把手带您无忧上云