Angular 8：使用响应式表单将表单数据从子输出发送到父级答案

【问题标题】：Angular 8: Send Form Data from Child Output to Parent with Reactive FormsAngular 8：使用响应式表单将表单数据从子输出发送到父级
【发布时间】：2020-03-12 00:18:43
【问题描述】：

如何使用响应式表单将数据发送到父组件？我的子组件包含以下内容，但是，这似乎不适用于此处的示例，

我该如何解决这个问题？当我在表单中输入内容时，没有从控制台输出接收任何内容。有人可以提供有效的 stackblitz 演示吗？

孩子：

public editAddressForm: FormGroup;
@Output() private onFormGroupChange = new EventEmitter<any>();

this.editAddressForm = this.formBuilder.group({
  'streetNumber': [null, [Validators.required, Validators.maxLength(32)]],
  'streetName': [null, [Validators.required, Validators.maxLength(64)]],
  'city': [null, [Validators.required, Validators.maxLength(32)]],
  'state': [null, [Validators.required, Validators.maxLength(16)]],
  'postalCode': [null, [Validators.required, Validators.maxLength(16)]]
})
}


ngOnInit() {

this.onFormGroupChange.emit(this.editAddressForm);


    <form [formGroup]="editAddressForm">
          <input formControlName = "city" class = "mailstopcode"></input>
          <input formControlName = "PostalCode" class = "incareof"></input>     
    </form>

家长：

formCheck :any  = '' 
public onFormGroupChangeEvent(_event) {
  this.formCheck = _event;
  console.log(_event, this.formCheck['controls'])
  console.log(_event)
}

<app-mailing-form (onFormGroupChange)="onFormGroupChangeEvent($event)"></app-mailing-form>

【问题讨论】：

你能详细说明一下到底是什么不工作吗？你得到错误的控制台输出了吗？
基于您的代码 sn-p... 您是否尝试在 ngOnInit() 上使用 emit()？这不起作用，如果不是，你是如何发射它的？
嗨@yurzui我正在关注这个例子stackoverflow.com/questions/53946907/…，你能提供一个更好的stackblitz，带有控制台日志，谢谢
您需要将发射连接到输入的更改事件

标签： angular typescript angular8

【解决方案1】：

每次表单发生变化时，您都需要调度事件发射器，这意味着您需要订阅表单的变化，然后在您孩子的ngOnInit 方法中发出@Output() 属性：

ngOnInit() {
  this.editAddressForm.valueChanges
    .subscribe(() => this.onFormGroupChange.emit(this.editAddressForm.value));
}

请注意，即使表单无效，上述代码也会触发事件。如果您只想在表单有效时触发事件，即点击提交按钮后，您可以执行以下操作：

public submit(): void {
  if (this.editAddressForm.valid) {
    this.onFormGroupChange.emit(this.editAddressForm.value);
  }
}

或者使用 rxjs 可观察模式：

private submit$ = new Subject<void>();

ngOnInit() {
  this.submit$.pipe(
    filter(() => this.editAddressForm.valid),
    map(() => this.editAddressForm.value),
  ).subscribe((formData) => this.onFormGroupChange.emit(formData));
}

public submit(): void {
  this.submit$.next();
}

更新：

父组件只需要监听子组件的onFormGroupChange事件，提供一个接收表单数据作为其第一个参数的函数：

public onFormGroupChangeEvent(formData) {
  console.log(formData.city);
  console.log(formData.postalCode);
  console.log(formData);
}

<app-mailing-form
  (onFormGroupChange)="onFormGroupChangeEvent($event)">
</app-mailing-form>

【讨论】：