Ngx-Formly два входа в один пользовательский тип - PullRequest
Новая
       26

Ngx-Formly два входа в один пользовательский тип

0 голосов
/ 18 февраля 2020

Есть ли способ определить пользовательский тип formly с двумя входами одновременно без черной линии, исходящей от материала.
Что мне нужно, так это ввод числа с помощью ползунка. Пользователь должен иметь возможность нормально вводить данные и изменять заданное значение.
Примерно так:
enter image description here
Мой подход:

Расширение пользовательского компонента в моем FormlyModule.forRoot({types:[...]}): 

{
    name: 'custom-test-input',
    component: FormlyTestInputComponent, 
    extends:'input',
}

Шаблон: 

<input matInput 
  type="number"
  [formControl]="formControl" 
/>
<mat-slider></mat-slider>

Я знаю, как связать оба значения, используя to.bindValue (не в примере кода выше), но после расширения input у меня есть эта строка ввода, расположенная под всем моим полем формы, которое, я думаю, исходит от mat-form-field.
Как:
enter image description here
Есть ли способ уменьшить эту строку, поместить ее в поле ввода и сохранить в одном пользовательском типе? Спасибо за помощь!

1 Ответ

0 голосов
/ 21 февраля 2020

Я нашел способ скрыть mat-form-field-underline после того, как посмотрел на реализацию.
Используя defaultOptions, которые можно установить в пользовательской форме в массиве типов, чтобы Доступ к атрибуту hideFieldUnderline (логический) был решением.
Это способ отключения подчеркивания на форме, которая расширяет пользовательскую форму. 

types: [{ 
    name: 'custom-slider-input',
    component: FormlyCustomSliderInputComponent, 
    extends:'slider',
    defaultOptions: {
        templateOptions: {
            hideFieldUnderline: true, //is hiding underline
        },
    }
}],
...