Question

当我尝试将其与表单一起使用时，我遇到了名为ng2-nouislider的角度包问题。

我将相同的表单控件附加到一个简单的输入和一个nouislider元素上。它们都分别设置表单控件的值，但是它们不会影响彼此的值。我应该如何设置表单，以便在更改输入中的值时，滑块也使用新值进行更新（反之亦然）？

我为此创建了一个stackblitz项目。

这是我使用的代码：

html：

<code>form disabled: {{ form.get('single').disabled }}</code>
<br>
<code>form value: {{ form.get('single').value }}</code>
<form [formGroup]="form">
  <input type="text" [formControl]="form.get('single')">
  <nouislider [min]="0" [max]="10" [step]="0.1 [formControl]="form.get('single')"></nouislider>
</form>

<div class="btn-group">
  <button type="button" class="btn btn-primary (click)="toggleDisabled()">
    {{form.get('single').disabled ? 'Enable': 'Disable'}}
  </button>
</div>

component.ts：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({ 'single': [3] });
    // this.watchFormChanges();
  }

  watchFormChanges() {
    this.form.get('single').valueChanges
      .pipe(debounceTime(300))
      .subscribe(v => {
        this.form.get('single').setValue(v, { onlySelf: true, emitEvent: false });
      });
  }

  toggleDisabled() {
    const control = this.form.get('single');
    control.enabled ? control.disable() : control.enable();
  }
}

有趣的是，禁用对这两者都起作用，并且如果您使用注释掉的方法调用，则可以起作用，因为我们手动设置了控制值。

所以我的问题是，我在这里做错了吗？我该怎么做，以至于不需要注释掉我的代码？

Answer 1

我认为您没有做错任何事情。显然，这是设计使然：https://github.com/angular/angular/issues/13792。

那里的人建议的解决方法是观察表单控件的值更改并手动更新它，这是您已经想到的。这似乎是目前的唯一方法。

Answer 2

实际上，您不应该从两个不同的FormControl引用相同的FormControlDirective。 Angular并非旨在做到这一点，因此您必须保持变通方法（或者，如果不适合您的需求，则寻找更清洁的方法）。

在另一个输入上使用相同控件时，为什么不更新ng2-nouislider元素值？

2 个答案: