title: Angular 2 form valueChanges fires continuously
body: <p>I am trying to update the value <strong>name</strong> of a form with a value I get from a service, once the <strong>location</strong> field is filled. I try to this by watching the <strong>valueChanges</strong> of the form object. It works, but it fires continuously, although the values don't change anymore. the <strong>debounceTime()</strong> and <strong>distinctUntilChanged()</strong> have no influence:</p>
  
  <pre><code>bookmarkForm: FormGroup;
  ngOnInit(): void {
  
    this.bookmarkForm = this.formBuilder.group({
      name: ['', Validators.required],
      location: ['', Validators.required],
      description:'',
      shared: false
    });
  
    this.bookmarkForm.valueChanges
      //.debounceTime(800)
      //.distinctUntilChanged()
      .subscribe(formData =&gt; {
        if(formData.location){
          console.log('location changed', formData);
          this.bookmarkService.getBookmarkTitle(formData.location).subscribe(response =&gt; {
            console.log('Response: ', response);
            if(response){
              this.bookmarkForm.patchValue({name:response.title}, {emitEvent: false});
            }
          });
        }
      });
  }    
  </code></pre>
  
  <p>The html template</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="col-md-8 col-md-offset-2"&gt;
      &lt;form [formGroup]="bookmarkForm" novalidate (ngSubmit)="saveBookmark(bookmarkForm.value, bookmarkForm.valid)"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="location"&gt;Location*&lt;/label&gt;
          &lt;input type="text" class="form-control" id="location"
                 required
                 name="location"
                 formControlName="location"
                 placeholder="Usually an URL"&gt;
          &lt;div [hidden]="bookmarkForm.controls.location.valid || (bookmarkForm.controls.location.pristine &amp;&amp; !submitted)"
               class="alert alert-danger"&gt;
            Location is required
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="name"&gt;Name*&lt;/label&gt;
          &lt;input type="text" class="form-control" id="name"
                 required
                 formControlName="name"
                 placeholder="Name of the bookmark to recognize later"&gt;
          &lt;div [hidden]="bookmarkForm.controls.name.valid || (bookmarkForm.controls.name.pristine &amp;&amp; !submitted)"
               class="alert alert-danger"&gt;
            Name is required
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="description"&gt;Notes...&lt;/label&gt;
          &lt;textarea class="form-control"
                    id="description"
                    formControlName="description"
                    placeholder="Make some notes to help you later by searching..."&gt;
          &lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="form-check"&gt;
          &lt;label class="form-check-label"&gt;
            &lt;input class="form-check-input" type="checkbox" value="true" formControlName="shared"&gt;
            &lt;strong&gt; Make this bookmark public so others can benefit from it &lt;/strong&gt;
          &lt;/label&gt;
        &lt;/div&gt;
        &lt;button type="submit" class="btn btn-default" [disabled]="!bookmarkForm.valid"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas? Thanks</p>