时间戳

首页 > 解决方案 > 为什么在另一个输入上使用相同的控件时，ng2-nouislider 元素值没有更新？

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

问题描述

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

我将相同的表单控件附加到一个简单的输入和一个 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>

组件.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();
  }
}

有趣的部分是禁用对两者都有效，如果您使用注释掉的方法调用它会起作用，因为我们手动设置了控制值。

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

标签： angularforms

解决方案

我不认为你做错了什么。显然，这是设计使然：https ://github.com/angular/angular/issues/13792 。

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

推荐阅读