Question

以下代码检查valueChanges上的username输入。仅在提交后如何检查username输入？（即，等待一个submit事件，而不检查每个valueChange吗？）

      this.formCtls['username'].valueChanges.pipe(
        filter<String>(text=>text.length > 2),
        debounceTime(10),
        distinctUntilChanged(), 
        . . .

此外，第二个问题可能不足够重要，无法单独提出一个全新的问题。。。：如上所述，为什么我的编辑器强迫我在<String>旁边添加filter泛型？我在网上看到了几个代码片段，它们只是：

      this.formCtls['username'].valueChanges.pipe(
        filter(text=>text.length > 2),
        debounceTime(10),
        distinctUntilChanged(),

但没有<String>，我的编辑器（Visual Studio Code）抱怨property 'length' does not exist on type 'unknown'，唯一的解决方法是在<String>之后添加filter类型。

Answer 1

如果您不介意在提交之前不更新该字段，则可以在表单控件上调用updateOn: submit，例如：

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    field1: ['', { updateOn: 'submit'}]
  })

  this.myForm.get('field1').valueChanges.pipe(
    filter(text=>text.length > 2),
  )
  .subscribe(val => console.log(val))
}

但是，在提交之前，表单值不会更新此字段，因此记住这一点很重要。

STACKBLITZ

但是我也看不出为什么如果您需要执行类似的操作，为什么您也不能处理表单函数中的表单控件逻辑。

Answer 2

解决方案是：

<form name="myForm"> <input ng-model="modelobject" ng-model-options="{updateOn: 'submit'}"> <button id="confirmButton" role="confirm" class="confirm-btn"> Confirm </button> </form>

如何仅在提交时检查formControl值？

2 个答案: