Question

免责声明：我对Angular和RXJS都是新手。

我有一个简单的表单，试图从中创建一个可观察的表单。这将查找submit事件，并更新组件中的某些值。但是，我遇到了this._subscribe is not a function错误。

<form (submit)='submitForm()'>
  <button type='submit'>Submit</button>
</form>

我的组件

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import UtilsHelperService from '../services/utils-helper.service';

@Component({...stuffs...})

export class HomeComponent implements OnInit {
  formSubmit: Observable<any>;
  counter = 0;
 
  constructor() { }

  ngOnInit() {
    const form = document.getElementsByTagName('form')[0];
    this.formSubmit = Observable.create(form, 'submit');
  }

  submitForm() {
    this.formSubmit.subscribe(
      UtilsHelperService.formSubmitObserver(this.counter));
  }
}

还有我的utils-helper.service.ts助手类...

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export default class UtilsHelperService {
  static formSubmitObserver(counter) {
    return {
      next: (value) => {
        counter++;
      },
      error: err => console.log(err),
      complete: () => console.log('complete')
    }
  }
}

我发现formSubmit观察者的创建很好。
我有一个UtilsHelperService.formSubmitObserver方法，它返回带有三个必要方法的observer对象。

所以，我不确定是我做错的Angular东西（我想不是）还是RXjs的东西。谢谢您的阅读：）

Answer 1

看看FormGroup。您可以订阅其“ valueChanges”属性。

FormGroup formGroup;

// populate your formGroup (https://angular.io/guide/reactive-forms#step-1-creating-a-formgroup-instance)

formGroup.valueChanges.subscribe(// do whatever you want);

Answer 2

我做了两件事来解决这个问题：

使用fromEvent代替Observable.create从submit事件创建可观察事件。这样，订阅不会引发错误（正在调查原因..）
由于服务是单例，因此无法从服务更新组件属性。您必须使用eventemitter或使用AngularJS样式点规则。对于这种情况，我在组件本身中添加了所有辅助逻辑。

ngOnInit() {
  const form = document.getElementsByTagName('form')[0];
  this.formSubmit = fromEvent(form, 'submit');
  this.formSubmit.subscribe((submitEvent) => {
    this.counter++;
    this.formSubmitted.emit(this.counter);
  })
}

这样，我可以从组件和模板中删除submitForm方法，并从服务中删除助手方法。

从提交事件创建可观察的

2 个答案: