title: Angular2 Reactive Forms and BehaviorSubject
body: <p>I am new to Angular and cannot figure out updating reactive forms with async calls. </p>
  
  <p>I have a reactive form based on an object model. Any change in the form triggers an HTTP request that might send back an updated version of the object as a response. I need to update the form accordingly.</p>
  
  <p>I implemented a similar thing (list of those objects) with BehaviorSubject, but not sure how to do it with a form. </p>
  
  <p>EDIT: Sorry for not including code. It is rather messy, so here is a summary.</p>
  
  <p>Here is what I have right now:</p>
  
  <pre><code>export class EditQuestionnaire implements OnInit {
  
      questionnaireForm: FormGroup;
  
      questionnaire: Observable&lt;Questionnaire&gt;;
  
      // constructor with its dependencies omitted
  
      ngOnInit() {
          this.questionnaireForm = this.fb.group({
              'id': [''],
              'submitted': [false],
              'questions': this.fb.array(
                     []
              ),
          });
          this.questionnaire = this.questionnaireService.getQuestionnaireGeneral(); // This is an observable of a BehaviorSubject that gets updated in a service with every call to getQuestionnaire
  
          this.questionnaireService
              .getQuestionnaire(this.questionnaire.id)
              .subscribe(questionnaire =&gt; {
                  this.questionnaireForm = this.loadQuestionnaire(questionnaire); // loads the questionnaire into the form
              });
      }
      ...
  }
  </code></pre>
  
  <p>What I also have is a child component denoting a question in the questionnaire. Here I detect the changes:</p>
  
  <pre><code>export class QuestionComponent implements OnInit {
  
      @Input() questionForm: FormGroup;
      @Input() questionnaireId: string;
  
      // constructor and dependencies omitted
  
      get text() {
          return this.questionForm.get('text') as FormControl;
      }
      get answers() {
          return this.questionForm.get('answers') as FormArray;
      }
      get id() {
          return this.questionForm.get('id') as FormControl;
      }
      get comment() {
          return this.questionForm.get('comment') as FormControl;
      }   
  
      ngOnInit() {
          const questionId = this.id.value;
          this.comment.valueChanges
                      .pipe(
                           debounce(() =&gt; interval(2000))
                       )
                      .subscribe(newValue =&gt; {
                           this.saveComment(questionId, newValue);
                       });
  
          for (const answer of this.answers.controls) {
              this.answers.valueChanges.subscribe(val =&gt; {
                  const answerId = answer.get('id').value;
                  this.saveAnswer(questionId, answer);
          });
      }
  
      saveComment(questionId: string, comment: string) {
          this.questionnaireService.updateComment(questionnaireId, questionId, comment).subscribe(); // no need to rebuild here
      }
  
      saveAnswer(questionId: string, answerId: string) {
          this.questionnaireService.updateAnswer(questionnaireId, questionId, answerId).subscribe(questionnaire =&gt; { /* trigger the form to rebuild */ })
      }
  }
  </code></pre>
  
  <p>Answers to certain questions might trigger follow-up questions, so a whole new questionnaire is sent back from the back end. The problem I am encountering here is that the valueChanges listeners identify the new questionnaire as a change, and my application gets stuck in an infinite loop of HTTP requests.</p>
  
  <p>Any ideas how to work around this problem?</p>
  
  <p>UPDATE:</p>
  
  <p>I eventually ended up using an EventEmitter to pass the received questionnaire object to the parent component, where I rebuild the form.</p>