Изменения значения контроля угловой формы не уведомляют

Question

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

@Component({
  selector: 'my-app',
  template: `
       <input [formControl]="control" />
       <div>{{ name$ | async | json }}</div>
   `
})
export class AppComponent implements OnInit {
  name$: Observable<string>;
  control;

  constructor(private builder: FormBuilder) {
    this.control = this.builder.control('');
  }

  ngOnInit() {
    this.name$ = this.control.valueChanges
      .pipe(
        map((name) => {
          console.log('fired', name)
          return name;
        })
      );


    this.control.setValue('2');
  }
}

Когда я вызываю setValue, наблюдатель не получает никаких уведомлений. Кажется, что асинхронный канал не работает. Если я обернуть setValue в setTimeout, он работает. Почему так себя ведет?

Я также попытался добавить функцию shareReplay (), которая также не работает.

Answer 1

Если вы хотите использовать реактивную форму, вы должны использовать FormControl вместо FormBuilder.

Ваш элемент управления должен быть инициализирован так:

export class AppComponent implements OnInit {
public control = new FormControl('');

HTML это: <input type="text" [formControl]="control">

Тогда вам не нужно иметь Observable<string>, просто используйте

<div>{{ control.value | json }}</div>

Подробности см. В документе ReactiveForm: https://angular.io/guide/reactive-forms

Answer 2

это одно решение проблемы

this.control.setValue('2'); // I move any changes at the top for startWith operater 
this.name$ = this.control.valueChanges
  .pipe(
    startWith(this.control.value),
    map((name) => {
      console.log('fired', name)
      return name;
    })
  );

Еще один способ заставить его работать без оператора async. Это означает, что я подписался на изменения значения до того, как контрольное значение изменилось на '2', и я перехватил все изменения позже

this.control.valueChanges
  .pipe(
    map((name) => {
      console.log('fired', name)
      return name;
    })
  )
  .subscribe ( v => this.value = v )

шаблон

{{value}}

Почему пример в вопросе с async не работает, асинхронный оператор подпишется на наблюдаемое, но во время асинхронной подписки текущее значение элемента управления будет равно 2, поэтому никаких изменений не произойдет, поэтому первое значение будет не выдается как изменение для элемента управления формы, другая наблюдаемая вещь ленива, поэтому, когда вы подписываетесь, вы получаете значение, что любые изменения до этого не будут видны

Answer 3

Причина, по которой это не сработало, представление еще не инициализировано (разметка html), когда вы вызываете его из ngOnInit. Вам нужно добавить его в ngAfterViewInit():

import AfterViewInit from '@angular/core';
export class AppComponent implements AfterViewInit{ 
   ngAfterViewInit() {
    this.name$ = this.control.valueChanges
      .pipe(
        map((name) => {
          console.log('fired', name)
          return name;
        })
      );


    this.control.setValue('2');
  }
}

вам нужно проверить это, хотя я не