ng2-nouislider使用反应形式的文本输入-Java 学习之路

我有一个反应形式，有一个使用ng2-nouislider的范围滑块 . 它适用于所有精细和花花公子，但我希望滑块附带两个显示当前最小/最大值的文本输入字段，但也允许用户手动输入值 . 它还应该具有双向绑定，以便视图将使用任一方法更新 .

TS看起来像这样，表单有点嵌套：

this.myForm = this.formBuilder.group({
  ...,
  foo: this.formBuilder.group({
    rangeGroup: this.formBuilder.group({
      range: [[null, null], null]
    })
  }),
  ...,
});

HTML看起来像这样：

<div formGroupName="rangeGroup">
   <nouislider style="width: 100%" [config]="sliderConfig" formControlName="range"></nouislider>
    <div class="col-2">
      <input type="text" class="form-control">
    </div>
    <div class="col-2">
      <input type="text" class="form-control">
    </div>
</div>

我尝试使用带有文本输入的ngModel（指向范围数组索引），这对我来说在AngularJS之前有用，但是在这里我得到一个错误：

ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.

我还尝试使用myForm.get（...） . setValue（[e.target.value，...]）为文本输入创建一个change-event并手动更改表单值，但这种方法感觉不太好因为我必须手动验证值并更新视图 .

ng2-nouislider使用反应形式的文本输入

相关问题