角2のフォームvalueChangesが連続的に発生します

Question

のフィールドが満杯になると、フィールドが満杯になると、サービスから値を取得したフォームの名前を更新しようとしています。私はこれを試して、のvalueChangesフォームオブジェクトを見てください。それは機能しますが、値はそれ以上変化しませんが、連続的に発生します。

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> 

任意のアイデア：debounceTime（）とdistinctUntilChanged（）は影響を及ぼしませんか？ありがとう

Answer 1

は正しい方向に私を指してくれてありがとう。 パッチ番号をemitEventフラグでFormControlに実行しなければなりませんでした。 FormGroupにあるこのフラグはこのフラグを使用しません。だからここに私のソリューションです：あなたがテンプレートを投稿することができ

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

Answer 2

しかし、このサブスクリプションでは、なぜ値をパッチしていますか？

this.bookmarkForm.valueChanges 
    .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}); <----- THIS HERE 
      } 
     }); 
     } 
    }); 

あなたは、このため

this.bookmarkForm.patchValue({name:response.title}); 

Answer 3

あなたの猫の問題を抱えているがvalueChangesをトリガからフォームを防ぐためにemitEvent: falseオプションを設定します。

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