angular - 如何以 Angular react 形式访问表单控件和表单组

Question

我想pipe一个 react 形式的形式组。

然后，我想对此组单独的控件进行一些检查。

这是我定义表格的方式

  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感兴趣，那么您可以直接查看valueChanges的myName，而不用关注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)
);