Мат-слайд: одна смена запускает в два раза больше подписки на изменения стоимости

Question

Я хочу синхронизировать ползунок с вводимым текстом.Работает нормально.Также я хочу, чтобы элементы управления обновлялись, когда происходит событие размытия (updateon: 'blur', но я также хочу немедленно обновлять значение formcontrol, когда изменяется ползунок.

https://stackblitz.com/edit/angular-cakpgs

И теперь моя проблема: изменения значений моей формы запускаются дважды, когда я изменяю значение элемента управления с помощью ползунка. Когда я изменяю значение, я делаю patchValue в формуле, потому что я хочу немедленно обновить значение. И когдаползунок теряет фокус (событие размытия), уведомление о значениях запускается снова.

Как я могу сделать так, чтобы значения значения моего формуляра запускались только один раз, с требованиями:

1. Форма управления должна обновляться при возникновении события размытия updateon: 'blur'
2. Изменение значения с помощью ползунка должно быть немедленно обновлено

Answer 1

Я сделал следующее:

this.form.valueChanges
.pipe(distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)))
.subscribe(change => console.log(change));

Итак, я проверяю, действительно ли форма меняется, и если это так, то подписчик выполняется.В противном случае абонент не вызывается.

Answer 2

Если у вас уже есть formControls, тогда нет необходимости делать [value]="AgeControl.value", пусть значение обновляется только через formControl ... Так как мы хотим обнаружить изменения на каждом входе (тип: ползунок или текст), а затем повторить,мы добавили (change) для всех входных данных.

Чтобы сделать обновление более быстрым, я добавил третий ввод прямо в нижней части формы, который вносит эти изменения при каждом нажатии клавиши, более интересно видеть такое обновлениес <input />.Надеюсь, что это то, что вы ищете.

В вашем существующем стеке , укажите, что ваш hello-component.ts будет:

import { Component, OnInit, OnChanges } from '@angular/core';
// Must import to use Forms functionality  
import { FormBuilder, FormGroup, Validators, FormsModule, NgForm, FormControl } from '@angular/forms';

@Component({
  selector: 'app-hello-component',
  templateUrl: './hello-component.component.html',
  styleUrls: ['./hello-component.component.css']
})
export class HelloComponentComponent implements OnInit, OnChanges {

  form: FormGroup;

  constructor(private fb: FormBuilder) {
    // To initialize FormGroup  
    this.form = fb.group({
      'age': [null, { updateOn: 'blur' }]
    });
    this.form.valueChanges.subscribe(change => console.log(change));
  }

  ngOnInit() {
    this.AgeControl.setValue(10);
  }
  ngOnChanges() {
    console.log('change triggered');
  }

  public get AgeControl(): FormControl {
    return this.form.get('age') as FormControl;
  }
  onInputChange(event: any) {
    //value must change immediately
    this.form.patchValue({ 'age': event.target.value });
  }
  onSliderChange(event: any) {
    this.form.patchValue({ 'age': event.value });
  }
  onInputKeystroke(event: any) {
    this.form.patchValue({ 'age': event.target.value });
  }

}

В вашем существующем стеке укажите hello-component.html следующим образом:

<code><mat-slider thumbLabel tickInterval="1" min="1" [formControl]="AgeControl" (change)="onSliderChange($event)" max="100">
</mat-slider>
<br/>
<input [formControl]="AgeControl" (change)="onInputChange($event)">
<br/>
<input [formControl]="AgeControl" (change)="onInputChange($event)">
<pre>{{ form.value | json }}