Angular 8 : Send Form Data from Child Output to Parent with Reactive Forms

Question

如何使用响应式(Reactive)表单将数据发送到父组件？
我的子组件包含以下内容，但是，这里的示例似乎不起作用，

我怎样才能解决这个问题？
当我在表单中输入内容时，从控制台输出中什么也没有收到。有人可以提供有效的stackblitz演示吗？

child :

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>

Answer 1

每次表单发生更改时，您都需要调度事件发射器，这意味着您需要订阅表单的更改，然后发出 @Output()您 child 的属性(property)ngOnInit方法:

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>