Ярлык не отображается для настраиваемого средства выбора даты в ngx-formly/bootstrap
Я создаю динамический интерфейс / форму с помощью ngx-formly/bootstrap(без использования материала). Я хочу отобразить элемент управления datepicker, поэтому я использовал элемент управления custon bsdatepicker с помощью ngx-bootstrap/datepicker. Но ярлык не отображается, когда я передаю его в templateOptions
Я пробовал следующий способ 1. Создайте компонент, содержащий html для выбора даты.
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'
};
}
В app.module я зарегистрировал этот компонент, а в компоненте, где я определил схему,
{
key: 'date1',
type: 'bsdatepicker',
templateOptions: {
label :'From Date',
required: true
},
expressionProperties: {
//'templateOptions.label': 'From Date'
}
},
Любая помощь будет оценена по достоинству
1 ответ
При регистрации настраиваемого типа поля для уже существующего пользовательского интерфейса, такого как начальная загрузка, вам просто нужно использовать определенный form-field
оболочка для рендеринга label
а также validation
ошибки:
@NgModule({
imports: [
FormlyModule.forRoot({
types: [
{
name: 'bsdatepicker',
...
wrappers: ['form-field']
},
],
}),
],
})
export class AppModule { }