Метка не отображается для пользовательского средства выбора даты в ngx-formly / bootstrap - PullRequest
0 голосов
/ 12 марта 2020

Я создаю динамический c пользовательский интерфейс / форму, используя 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 Ответ

0 голосов
/ 12 марта 2020

При регистрации типа настраиваемого поля для уже существующего пользовательского интерфейса, такого как bootstrap, вам просто нужно использовать определенную оболочку form-field для отображения ошибок label и validation:

@NgModule({
  imports: [
    FormlyModule.forRoot({
      types: [
        {
          name: 'bsdatepicker',
          ...
          wrappers: ['form-field']
        },
      ],
    }),
  ],
})
export class AppModule { }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...