如何在Angular响应式表单中访问表单控件和表单组。

Question

我想要对响应式表单中的一个表单组进行 pipe 操作。

接着，我希望可以对这个表单组中的各个控件进行一些检查。

以下是我定义表单的方式：

  myForm = this.formBuilder.group({
    myFormNameDrop: this.formBuilder.group({
      myName:['',Validators.required],
      myDrop:['era']
    }),    
    style:[''],
    userId:[this.user_id]
  });

这是我尝试创建的管道

this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe(      
  debounceTime(400),
  distinctUntilChanged(),            
  filter(formdata => formdata.myName.length > 0),
  switchMap( formdata => this.shoesService.details(formdata.myName)),
  shareReplay(1)
);//pipe  

我遇到了两个错误。

TypeError: Cannot read property 'pipe' of undefined关于this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe(

另外，VS Code显示了一个警告：filter(formdata => formdata.myName.length > 0),：属性myName在类型'{}'上不存在。

在这种情况下，我该如何访问表单组和表单组中的控件？我使用Angular 6。

谢谢

- codebot

---

你应该尝试将 this.myForm.value.myFormNameDrop.valueChanges.pipe( 更改为 (this.myForm.controls['myFormNameDrop'] as FormGroup).valueChanges.pipe(。你应该订阅控件更改而不是值。值只是控件的普通值。 - karoluS

@karoluS 你好。我遇到了“模块解析失败：意外的标记”错误。我不知道在这一点上出了什么问题。 - codebot

你在哪里遇到了这个错误？ - karoluS

Answer 1

您没有正确获取表单控件。请在 FormGroup 对象上使用 get() 方法来获取 formControl

this.results = this.myForm.get('myFormNameDrop').valueChanges.pipe(      
  debounceTime(400),
  .........................
);

编辑：

要访问myName，您可以按以下方式执行：

this.myForm.get('myFormNameDrop').get('myName').value

---

如果您只对myName感兴趣，那么可以直接观察myName的valueChanges，而不是观察myFormNameDrop

this.results = this.myForm.get('myFormNameDrop').get('myName').valueChanges.pipe(      
  debounceTime(400),
  distinctUntilChanged(),            
  filter((myName) => myName.length > 0),
  switchMap(myName => this.shoesService.details(myName)),
  shareReplay(1)
);

- Amit Chigadani

---

谢谢Amit。这个解决了。你有没有想法如何在筛选部分访问“myFormNameDrop”的“myName”？我尝试了一些新的东西，例如 filter(formdata => formdata.get(myName).value.length > 0)，但VScode显示“找不到myName” 。 我错过了什么吗？get不应该获取myName吗？ - codebot

你好。如果我这样做，会得到“formdata.get不是一个函数”的错误。谢谢。 - codebot

我看到 formGroup 的 valueChanges 返回其 controls 作为键值对。所以 filter(formdata => formdata.myName.length > 0) 应该适用于你。 - Amit Chigadani

更简短的是，get 函数接受使用点符号访问子元素，因此要访问 myName，只需使用 this.myForm.get('myFormNameDrop.myName').value。 - stuhops

Answer 2

this.myForm.controls['myFormNameDrop']

可以在模板中使用。

在模板中工作。

- Jesus Eduardo Marquez Martinez

Answer 3

修改此行：

this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe( ...

致：

this.results = this.myForm.controls.myFormNameDrop.valueChanges.pipe( ...

- SoroushNeshat

---

我尝试了一下，但是出现了 ERROR TypeError: You provided '' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. 的错误。另外，在 filter 部分如何访问 formGroup 中的 myName 控件？谢谢。 - codebot