Cannot bind initial data to form controls
See original GitHub issueTrying to fill the data coming from my backend so it’s prepopulated
@Component({
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() {
super();
}
@DataInput()
@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
}
Container
customer$: Observable<Customer>;
this.customer$ = this.customerService.get(); // returns Observable<Customer>
// Also try ed
customer$: Subject<CustomerCardForm> = new Subject();
this.customerService.get().subscribe((customer) => {
this.customer$.next(customer);
});
Container html:
<app-my-profile [customer]='customer$ | async'></app-my-profile>
Issue Analytics
- State:
- Created 3 years ago
- Comments:10
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 😃
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:
Input component: