場所フィールドが入力されたら、フォームの値の名前をサービスから取得した値で更新しようとしています。フォーム オブジェクトの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>
何か案は?ありがとう