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

Question

I would like to pipe a form group of a reactive form.

Then I would like to do some checks on this group separate controls.

Here is how I define my form

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

And this is the pipe I try to create

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

I get two errors. TypeError: Cannot read property 'pipe' of undefined about the this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe(

and VS code shows a warning about the filter(formdata => formdata.myName.length > 0), : Property myName does not exists on type '{}'

How can I access formGroups and controls of formGroups in such cases? I use angular 6

Thanks

You should try changing `this.myForm.value.myFormNameDrop.valueChanges.pipe(` to `(this.myForm.controls['myFormNameDrop'] as FormGroup).valueChanges.pipe(`. You should subscribe to control change not a value. Value is just plain value of a control. — karoluS, Aug 29 '18 at 10:58
@karoluS Hi. I am getting `Module parse failed: Unexpected token ` .I dont know what is wrong at this point — codebot, Aug 29 '18 at 11:48

Amit Chigadani · Accepted Answer · 2018-08-29T12:44:23.620

22

You are not fetching the form controls properly. Use get() method on FormGroup object to fetch formControl

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

EDIT :

To access myName you may do it as as follows :

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

Also If you are interested in just myName, then you could directly watch for valueChanges of myName, instead of watching 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)
);

edited Aug 29 '18 at 12:44

answered Aug 29 '18 at 11:00

Amit Chigadani

28,482
13
80
98

Thanks Amit. This worked. Any idea how to access the `myName` of the `myFormNameDrop` in the filter part? I tried something new like ` filter(formdata => formdata.get(myName).value.length > 0), ` and VScode says "Cannot find myName" . What am I missing? Shouldn't `get` get `myName` ? – codebot Aug 29 '18 at 11:58
Hi again. If I do this I get `formdata.get is not a function`. Thanks – codebot Aug 29 '18 at 14:45
I see that `formGroup` `valueChanges` returns its `controls` as a key value pair. So `filter(formdata => formdata.myName.length > 0)` should do it for you. – Amit Chigadani Aug 29 '18 at 15:06
Even shorter, the `get` function accepts accessing children using dot notation so to access `myName` it would just be `this.myForm.get('myFormNameDrop.myName').value` – stuhops Apr 05 '22 at 17:40

score 4 · Answer 2 · answered Jan 17 '22 at 01:41

4

this.myForm.controls['myFormNameDrop']

working in template

answered Jan 17 '22 at 01:41

Jesus Eduardo Marquez Martinez

69
3

score 3 · Answer 3 · answered Aug 29 '18 at 11:01

3

change this line :

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

to :

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

answered Aug 29 '18 at 11:01

SoroushNeshat

656
5
11

I tried that and I get `ERROR TypeError: You provided '' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.`. Also, any idea on how to access the `myName` control of the formGroup in the `filter` part? Thanks – codebot Aug 29 '18 at 11:32

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

3 Answers3