形式：手动触发valueChange

Posted 2023-03-13

【中文标题】形式：手动触发valueChange

【英文标题】：Form: Manually trigger valueChange

【发布时间】：2019-11-12 21:33:35

【问题描述】：

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

我希望我的例子足够清楚。感谢您的帮助！

【问题讨论】：

你希望发生什么？

this.myForm.group?

@PrashantPimpale 我期待我的stringArray$ 在setValue 被解析时被触发。

我想你想要this.myForm = this.formBuilder.group etc. 喜欢stackblitz.com/edit/angular-xmbham

@AndrewAllen 是的，对不起，这是我的错，我在示例中没有写好，我会修复它。对不起

【参考方案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 的文档