CODEWITHSUNDEEP
angular
firstpostcommenter
firstpostcommenter

Reputation: 2921

Subscribe to valueChanges from input FormControl in FormGroup instead of FormControl directly

I have the below "working" code in component.ts file (I have included the html code as well)

Please look at the commented lines in 3 places in the code. When I use FormControl variable directly then the valueChanges property works fine but when I access the FormControl variable from a FormGroup then I get "ERROR Error: Cannot find control with unspecified name attribute"

What am I doing wrong here?

Code in app.component.ts:

import { Component } from '@angular/core';

import {FormControl, FormGroup} from '@angular/forms';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: "app-root",
  template: `
    <!--<form [formGroup]="searchFormGroup" >-->
       <h2>Observable events from formcontrol</h2>
      <input type="text" placeholder="Enter input" [formControl]="searchInput">
    <!--</form>-->
    `
})
export class AppComponent {

  //searchFormGroup = new FormGroup({searchInput: new FormControl('')});
  searchInput: FormControl = new FormControl('');

  constructor(){

    //this.searchFormGroup.get('searchInput').valueChanges
    this.searchInput.valueChanges
      .debounceTime(500)
      .subscribe(input => console.log(input));
  }
}

Thanks

Upvotes: 0

Views: 1344

Answers (3)

firstpostcommenter
firstpostcommenter

Reputation: 2921

Started working fine after I used formControlName in the html code:

import { Component } from '@angular/core';

import {FormControl, FormGroup} from '@angular/forms';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: "app-root",
  template: `
    <form [formGroup]="searchFormGroup" >
       <h2>Observable events from formcontrol</h2>
      <input type="text" placeholder="Enter input" formControlName="searchInput">
    </form>
    `
})
export class AppComponent {

  searchFormGroup = new FormGroup({'searchInput': new FormControl('')});
  //searchInput: FormControl = new FormControl('');

  constructor(){

    this.searchFormGroup.get('searchInput').valueChanges
    //this.searchInput.valueChanges
      .debounceTime(500)
      .subscribe(input => console.log(input));
  }
}

Upvotes: 0

flcwl
flcwl

Reputation: 11

it cannot work in RXjs 6.0, here is how you can write it with Formcontrol

 // it works
 const searchInput = this.eleRef.nativeElement.querySelector('#search');
 fromEvent(searchInput, 'input').pipe(
   debounceTime(500)
)
.subscribe(input => {
   console.log(input);
});

Upvotes: 1

user4676340
user4676340

Reputation:

Because you don't build a form group like that. Here is how you build it. 

constructor(private fb: FormBuilder) {
  this.searchFormGroup = fb.group({
    searchInput: ['']
  });
}

Upvotes: 0

Related Questions