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

您设置了execve(2)选项以防止表单触发valueChanges：

            Map<String, ArrayList<Integer>> hm = new HashMap<String, ArrayList<Integer>>();

            String key="";
            while(file.readLine()!=null){
              key=file.readLine();  
      ArrayList<Integer> al = new ArrayList<Integer>();

          OUT: for (String line = file.readLine(); line != null; line = file.readLine()) { 
if(key.equals(line)){
              al.add(num);
  }
    else{
     break OUT;
}
}
             map.put(key, al);
        }

Answer 2

谢谢你指点我正确的方向。我必须在 FormControl 上使用 emitEvent 标志执行 patchValue 。 FormGroup 上的 patchValue 不会使用此标记。所以这是我的解决方案：

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

Answer 3

但是在这个订阅中你修补了值为什么？

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

Angular 2形式valueChanges不断激发

3 个答案: