Ngx-Formly 一种自定义类型中的两个输入

Question

有没有一种方法可以同时定义带有两个输入的自定义表单类型，而黑线来自 material。
我需要的是带有滑块的形式化数字输入。用户应该能够正常输入并更改给定值。
像这样：

我的做法：

扩展我的自定义组件 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。
像：

有没有办法缩小这条线，把它放在输入字段下面，然后 keep 它在一个自定义类型中？谢谢你的帮助！

Answer 1

我在查看实现后找到了隐藏 mat-form-field-underline 的方法。
使用可以在类型数组中的自定义表单上设置的 defaultOptions 来访问 hideFieldUnderline 属性（布尔值）是解决方案。
这就是在扩展自定义表单的表单上禁用下划线的方法。

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

Ngx-Formly 一种自定义类型中的两个输入

Ngx-Formly two inputs in one custom type

html

css

angular

ngx-formly

mat-form-field