Angular 2 form valueChanges fires continuously

Question

I am trying to update the value name of a form with a value I get from a service, once the location field is filled. I try to this by watching the valueChanges of the form object. It works, but it fires continuously, although the values don't change anymore. the debounceTime() and distinctUntilChanged() have no influence:

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 => {
      if(formData.location){
        console.log('location changed', formData);
        this.bookmarkService.getBookmarkTitle(formData.location).subscribe(response => {
          console.log('Response: ', response);
          if(response){
            this.bookmarkForm.patchValue({name:response.title}, {emitEvent: false});
          }
        });
      }
    });
}    

The html template

<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <form [formGroup]="bookmarkForm" novalidate (ngSubmit)="saveBookmark(bookmarkForm.value, bookmarkForm.valid)">
      <div class="form-group">
        <label for="location">Location*</label>
        <input type="text" class="form-control" id="location"
               required
               name="location"
               formControlName="location"
               placeholder="Usually an URL">
        <div [hidden]="bookmarkForm.controls.location.valid || (bookmarkForm.controls.location.pristine && !submitted)"
             class="alert alert-danger">
          Location is required
        </div>
      </div>
      <div class="form-group">
        <label for="name">Name*</label>
        <input type="text" class="form-control" id="name"
               required
               formControlName="name"
               placeholder="Name of the bookmark to recognize later">
        <div [hidden]="bookmarkForm.controls.name.valid || (bookmarkForm.controls.name.pristine && !submitted)"
             class="alert alert-danger">
          Name is required
        </div>
      </div>
      <div class="form-group">
        <label for="description">Notes...</label>
        <textarea class="form-control"
                  id="description"
                  formControlName="description"
                  placeholder="Make some notes to help you later by searching...">
        </textarea>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox" value="true" formControlName="shared">
          <strong> Make this bookmark public so others can benefit from it </strong>
        </label>
      </div>
      <button type="submit" class="btn btn-default" [disabled]="!bookmarkForm.valid">Submit</button>
    </form>
  </div>
</div>

Any ideas? Thanks

Answer 1

You cat set emitEvent: false option to prevent form from triggering valueChanges:

form.patchValue({name:response.title}, {emitEvent: false})