Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot bind initial data to form controls

See original GitHub issue

Trying to fill the data coming from my backend so it’s prepopulated

	selector: 'app-my-profile',
	templateUrl: './my-profile.component.html',
	styleUrls: [ './my-profile.component.scss' ],
	// providers: [subformComponentProviders(MyProfileComponent)],
	// changeDetection: ChangeDetectionStrategy.OnPush
export class MyProfileComponent extends NgxRootFormComponent<Customer> implements OnInit {
	constructor() {

	@Input('customer') dataInput: Required<Customer> | null | undefined;

	dataOutput: EventEmitter<CustomerCardForm>;

	ngOnInit(): void {
		console.log(this.dataInput); // always undefined

	protected getFormControls(): Controls<Customer> {
		console.log(this.dataInput); // always undefined
		return {
			no: new FormControl({ value: 'Test', disabled: true }, Validators.required),
export interface Customer {
	no: string


customer$: Observable<Customer>;
this.customer$ = this.customerService.get(); // returns Observable<Customer>

// Also try ed
customer$: Subject<CustomerCardForm> = new Subject();

this.customerService.get().subscribe((customer) => {

Container html: <app-my-profile [customer]='customer$ | async'></app-my-profile>

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10

github_iconTop GitHub Comments

alemputescommented, May 11, 2020

Sorry if I got off topic here, just wanted to answer your question. You can close it and thanks for all your help, really appreciate it 😃

alemputescommented, May 11, 2020

Wow, knew I screwed up somewhere hehe. I accidentally stumbled on this library and man I am glad, it’s soo freaking good, big thumbs up for your great work and thanks for your fast answers.

Now I just wish I had a great library like this to reduce the html boilerplate code as well, maybe you can point me in right direction? 😃 I am now using this method:

<form [formGroup]="formGroup">
        <app-input [controlName]="formControlNames.customerNo" label="Kundnummer"></app-input>

Input component:

  selector: 'app-input',
  template: `
    <div class="p-grid">
      <div class="p-col-12 p-md-3">{{ label }}</div>
      <div class="p-col-12 p-md-6">
        <input [formControlName]="controlName" [type]="type" [placeholder]="placeholder" pInputText />
	    <div class="p-col-12 p-md-3">
  styleUrls: ['./input.component.css'],
  viewProviders: [
      provide: ControlContainer,
      useFactory: (container: ControlContainer) => container,
      deps: [[new SkipSelf(), ControlContainer]]
export class InputComponent implements OnInit {
  constructor() {}

  @Input() controlName: string;

  @Input() type = 'text';
  @Input() label: '';
  @Input() placeholder = '';
  @Input() errorMessage = '';
  @Input() isInvalid = false;
Read more comments on GitHub >

github_iconTop Results From Across the Web

unable to bind data to input field - angular - Stack Overflow
I am using reactive forms in my Angular App. I want to bind data to an input field of type button. I want...
Read more >
Can't Bind to formGroup Not Known Property Error in Angular
Let's take a look at why the “Can't bind to 'formGroup' since it isn't a known property of 'form'” error shows up and...
Read more >
Fix: Can't bind to form control since it isn't a known ... - YouTube
In this video, I am going to fix this issue, this issue happened when angular doesn't add reference of the component automatically.
Read more >
Bind Windows Forms controls to data in Visual Studio
Bind Windows Forms controls to data in Visual Studio so that you can display data to users of your application.
Read more >
FormControlName - Angular
Syncs a FormControl in an existing FormGroup to a form control element by name. See alsolink · Reactive Forms Guide · FormControl ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found