Question

我正在使用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。

我希望我的例子很明确。谢谢您的帮助！

Answer 1

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运算符here上的文档

形式：手动触发valueChange

1 个答案: