Angular 2形式valueChanges不断激发

Question

我正在尝试使用我从服务获得的值更新表单的值名称,一旦填充了位置字段.我通过观察表单对象的valueChanges来尝试这个.虽然价值不再改变,但它仍然可以连续发射.在debounceTime()和distinctUntilChanged()有没有影响:

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});
          }
        });
      }
    });
}    

html模板

<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>

有任何想法吗？谢谢

Answer 1

您设置emitEvent:false选项以防止表单触发valueChanges:

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

Answer 2

谢谢你指点我正确的方向.我不得不在FormControl上使用emitEvent标志执行patchValue.该patchValue对FormGroup不采取此标志.所以这是我的解决方案:

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('Respoonse: ', response);
        if(response){
          this.bookmarkForm.controls['name'].patchValue(response.title, {emitEvent : false});
        }
      });
    }
  });

现在更优雅的方法是仅在位置字段中监听更改,然后才填写标题:

this.bookmarkForm.controls['location'].valueChanges
  .debounceTime(800)
  .distinctUntilChanged()
  .subscribe(location => {
    console.log('Location: ', location);
    this.bookmarkService.getBookmarkTitle(location).subscribe(response => {
      if(response){
        this.bookmarkForm.controls['name'].patchValue(response.title, {emitEvent : false});
      }
    });
  });