一旦填写了位置字段,我就尝试使用从服务中获取的值来更新表单的名称值。我通过观察表单对象的值更改来尝试此操作。它可以工作,但是会连续触发,尽管值不再更改。 debounceTime()和distantUntilChanged()没有影响:
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>
有任何想法吗?谢谢
最佳答案
您可以设置emitEvent: false选项来防止表单触发valueChanges:
form.patchValue({name:response.title}, {emitEvent: false})
关于Angular 2表单值不断变化触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41887900/