Angular Reactive Form Programmatic Setter

Question

我有一个 Angular Reactive Form与验证。为我的 hiddenComposedField 调用 setter 的正确方法是什么？

组件.ts

ngOnInit() {
  this.myForm = this.formBuilder.group({
    'field1': ['', [Validators.required]],
    'field2': ['', [Validators.required]],
    'hiddenComposedField': [''],
  });

  this.myForm.get('field1').valueChanges.subscribe((val) => {
     this.setHiddenComposedField();
  });
  this.myForm.get('field2').valueChanges.subscribe((val) => {
     this.setHiddenComposedField();
  });
}

setHiddenComposedField() {
    let field1 = this.myForm.get('field1').value;
    let field2 = this.myForm.get('field2').value;

    // This doesn't work, but I want something like it:
    this.myForm.set('hiddenComposedField',field1 + ' ' + field2); // :(
}

组件.html

<form [formGroup]="myForm">
  <input formControlName="field1">
  <input formControlName="field2">
  <!-- NB: hiddenComposedField is not exposed to the user; -->
  <!--     it is only on the submitted form model. -->
  <button type="submit">Submit</button>
</form>

Answer 1

这样的事情应该会起作用，这样您就可以先获取控件，然后再设置它的值。

this.myForm.get('hiddenComposedField').setValue(field1 + ' ' + field2);