如何在 angular 反应式表单中访问表单控件和表单组

Question

我想pipe一个反应形式的表格组。

然后我想对这个组单独的控件做一些检查。

这是我定义表单的方式

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

这是我尝试创建的 pipe

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 代码显示有关 filter(formdata => formdata.myName.length > 0), 的警告：属性 myName 在类型 '{}'

上不存在

在这种情况下如何访问 formGroups 和 formGroups 的控件？我用 angular 6

谢谢

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

Answer 2

更改此行：

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

至：

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

Answer 3

this.myForm.controls['myFormNameDrop']

在模板中工作

如何在 angular 反应式表单中访问表单控件和表单组

How to access form control and form group in angular reactive form

angular-pipe

angular

angular-forms

angular6