Ngx-Formly два входа в одном настраиваемом типе
Есть ли способ определить собственный формальный тип с двумя входами одновременно без черной линии, исходящей от материала.
Что мне нужно, так это формальный ввод числа с помощью ползунка. Пользователь должен иметь возможность обычно вводить ввод и изменять данное значение.
Примерно так:
Мой подход:
Расширение пользовательского компонента в моем FormlyModule.forRoot({types:[...]})
:
{
name: 'custom-test-input',
component: FormlyTestInputComponent,
extends:'input',
}
Шаблон:
<input matInput
type="number"
[formControl]="formControl"
/>
<mat-slider></mat-slider>
Я знаю, как связать оба значения, используя to.bindValue
(не в приведенном выше примере кода), но после расширения ввода у меня есть эта строка поля ввода, расположенная под всем моим полем формы, которое, как мне кажется, исходит изmat-form-field
.
Например:
есть ли способ уменьшить эту строку, поместить ее под поле ввода и сохранить в одном настраиваемом типе? Спасибо за помощь!
1 ответ
Я нашел способ скрыть подчеркивание mat-form-field-field, посмотрев на реализацию.
Решением было использование defaultOptions, которые можно установить в настраиваемой форме в массиве типов для доступа к атрибуту hideFieldUnderline (логическому).
Вот как вы отключаете подчеркивание в форме, которая расширяет настраиваемую форму.
types: [{
name: 'custom-slider-input',
component: FormlyCustomSliderInputComponent,
extends:'slider',
defaultOptions: {
templateOptions: {
hideFieldUnderline: true, //is hiding underline
},
}
}],