Форма: Вручную вызвать valueChange - PullRequest
Новая
       7

Форма: Вручную вызвать valueChange

0 голосов
/ 02 июля 2019

Я создаю форму с FormBuilder.Когда один из моих FormControl обновляется, я хочу вызвать другую функцию, поэтому я использую valueChanges для этого.Но дело в том, что я хочу вызвать его при инициализации.Я видел, что setValue должен делать вещи, но я не выгляжу как работающий на меня, или я просто слишком плох.

HTML: 

<div class="col form-group">
  <label for="stringArray">My label</label>
  <select id="stringArray" class="form-control" *ngIf="stringArray$ | async as stringArray" formControlName="mySelect">
    <option *ngFor="let val of stringArray" [value]="val">{{ val }}</option>
  </select>
</div>

TS 

public myForm: FormGroup;
public stringArray$: Observable<string[]> = null;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.initForm();

  this.stringArray$ = this.myForm.get('mySelect').valueChanges.pipe(
    switchMap(value => {
      return this.doSomething(value);
    })
  );
  this.myForm.get('mySelect').setValue('tmp', { emitEvent: true });
}

initForm() {
  this.myForm = this.formBuilder.group({
    mySelect: ['', Validator.required]
  })
}

doSomething(value): Observable<string[]> {
  console.log(value);
  return of(['toto', 'tata', 'tutu', 'tmp'])
}

У меня нет ошибок, просто мой выбор не отображается, потому что stringArray$ равен null.

Надеюсь, мой пример достаточно ясен.Спасибо за вашу помощь!

1 Ответ

4 голосов
/ 02 июля 2019

Отличный вариант использования для оператора startWith rxjs! У меня много кода в моем коде при использовании valueChange

Вот что я лично всегда делаю. 

import { startWith } from 'rxjs/operators';

this.stringArray$ = this.myForm.get('mySelect')
.valueChanges.pipe(
    startWith(this.myForm.value),
    switchMap(value => {
      return this.doSomething(value);
    })
  );

См. Мой stackblitz для примера

См. Документацию по оператору startWith здесь

...