Angular ngx formly/bootstrap中未显示自定义日期选择器的标签
我正在使用ngx formly/bootstrap(不使用材质)创建动态UI/表单。我想显示datepicker控件,所以我已经使用ngx引导/datepicker显示了custon bsdatepicker控件。但当我在templateOptions中将标签交给时,它并没有显示出来 我试着用这种方法 1.创建一个包含日期选择器html的组件Angular ngx formly/bootstrap中未显示自定义日期选择器的标签,angular,ngx-bootstrap,ngx-formly,Angular,Ngx Bootstrap,Ngx Formly,我正在使用ngx formly/bootstrap(不使用材质)创建动态UI/表单。我想显示datepicker控件,所以我已经使用ngx引导/datepicker显示了custon bsdatepicker控件。但当我在templateOptions中将标签交给时,它并没有显示出来 我试着用这种方法 1.创建一个包含日期选择器html的组件 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
//datepicker.component.html
<input type="text"
id="dob-id"
class="form-control calendar"
placement="bottom"
bsDatepicker
[formlyAttributes]="field"
#dobDate="bsDatepicker"
[bsConfig]="bsConfig"
placeholder="YYYY-MM-DD"
[class.is-invalid]="showError" class="" style="width: 350px;">
//datepicker.component.ts
import { Component, OnInit } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
import { BsDatepickerConfig } from 'ngx-bootstrap';
@Component({
selector: 'app-datepicker',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.scss']
})
export class CustomDatepickerComponent extends FieldType {
// Optional: only if you want to rely on `MatInput` implementation
bsConfig: Partial<BsDatepickerConfig> = {
: 'YYYY-MM-DD',
showWeekNumbers: false,
containerClass: 'theme-dark-blue'
};
}
当为已经存在的UI(如引导)注册自定义字段类型时,您只需要使用定义的
表单字段
包装器来呈现标签
和验证
错误,我们将非常感谢您的帮助:
@NgModule({
imports: [
FormlyModule.forRoot({
types: [
{
name: 'bsdatepicker',
...
wrappers: ['form-field']
},
],
}),
],
})
export class AppModule { }
@NgModule({
imports: [
FormlyModule.forRoot({
types: [
{
name: 'bsdatepicker',
...
wrappers: ['form-field']
},
],
}),
],
})
export class AppModule { }