Best angular 6 tutorial all category combined "paid or free" from someone who tried many tutorials. Keep it up Sir. Thanks for offering such great lessons for free. God bless you. You help some of us develop our carrier and be the best at what we do.
Got error: Identifier 'controls' is not defined. 'AbstractControl' does not contain such a member Fixed this: *ngFor="let skill of employeeForm.get('skills')['controls']; let i = index;"
one of the best tutorial in youtube. great sir...., is there any way to upload multiple files in dynamically created controls . for eg. if we add one more control in add skill form for uploading multiple file @venkat sir
How would one go about this if the intention is to push the current formgroup to the array in stead of relying on seperate *NgFor? So you fill in the skill, press 'add skill' and then the form resets and you can fill in a new one?
Identifier 'controls' is not defined. 'AbstractControl' does not contain such a member. Kinda annoying it doesn't work in my view template when I implement this line *ngFor="let skill of employeeForm.get('skills').controls"
are you doing the typecasting of your formarray in button click function and secondly you must bind formgrouparrayname like this [formgroupname] in square brackets...
For those getting the below error :- error TS2339: Property 'controls' does not exist on type 'AbstractControl' Replace *ngFor="let skill of employeeForm.get('skills').controls" with *ngFor="let skill of employeeForm.get('skills')['controls']"
@@umerfarooq7623 try getArrayControls() { return (this.userForm.get('extra') as FormArray).controls; } in the ts file and in html '*ngFor="let extra of getArrayControls();index as i"
What I hate now about Angular 6 is I have 2 errors and I can't figure out how to fix them. Your tutorials are great but if I or someone else builds the code wrong and gets errors, it is incredibly hard to fix them! I've spent many hours trying to eliminate these errors and your code in your blog does not help. It would be nice to have access to the complete code at each stage so that we can get our program working so we can continue on. Now you are releasing new videos and I can't get rid of my errors. And, once I make the new changes, I can't get back to when my program was working earlier. This is extremely frustrating!
I finally eliminated my errors but I'm still seeing some problems. The phone field doesn't show the required message after losing focus and the required messages for the skills fields are shown but are not in red. I'll keep working and try to get these fixed.
@@josephregallis3394 Remember to bind the the (blur) event of the input box and call logValidationErrors. (blur)='logValidationErrors(). For the red coloring, make sure your spans have the bootstrap class, class="help-block".
*ngFor="let skill of employeeForm.get('skills')['controls']; let i = index;" If this doesn't work either then try adding a getter function in ts file to retrieve the form array as get skillSets(){return this.employeeForm? this.employeeForm.get('skills') as FormArray:null} and then in html code add *ngFor="let skill of skillSets.controls; let i=index"
Best angular 6 tutorial all category combined "paid or free" from someone who tried many tutorials. Keep it up Sir. Thanks for offering such great lessons for free. God bless you. You help some of us develop our carrier and be the best at what we do.
the best angular tutorial on the internet, hands down
Got error: Identifier 'controls' is not defined. 'AbstractControl' does not contain such a member
Fixed this: *ngFor="let skill of employeeForm.get('skills')['controls']; let i = index;"
Thankyou!
Thank you so much for these videos. I've taken many angular courses and yours are among the best.
Really I love it. Teaching ideas, analysis, examples progress are great. Grateful.
I am glad to see youre still active with this channel
one of the best tutorial in youtube. great sir...., is there any way to upload multiple files in dynamically created controls . for eg. if we add one more control in add skill form for uploading multiple file @venkat sir
How would one go about this if the intention is to push the current formgroup to the array in stead of relying on seperate *NgFor? So you fill in the skill, press 'add skill' and then the form resets and you can fill in a new one?
Thank you so much sir to make angular understand so easy...
Sir, need your help to make searchable textbox in dynamic form.
Thank you very much. You are Amazing.
I am facing TS2531: Object is possibly 'null'.
even after i wrote like =
*ngFor="let skill of employeeForm.get('skills')['controls']
please guide asap
Hi sir can you explain how to add these dynamic created skill rows to sql database and how to retrieve them using entity framework
Thank you such good explanation
Identifier 'controls' is not defined. 'AbstractControl' does not contain such a member. Kinda annoying it doesn't work in my view template when I implement this line *ngFor="let skill of employeeForm.get('skills').controls"
are you doing the typecasting of your formarray in button click function and secondly you must bind formgrouparrayname like this
[formgroupname] in square brackets...
Fixed
sir, can you please add a session for angular4+ dynamic routes from database ?
For those getting the below error :-
error TS2339: Property 'controls' does not exist on type 'AbstractControl'
Replace
*ngFor="let skill of employeeForm.get('skills').controls"
with
*ngFor="let skill of employeeForm.get('skills')['controls']"
Thanks.
not work for me
@@umerfarooq7623 try
getArrayControls() {
return (this.userForm.get('extra') as FormArray).controls;
} in the ts file and in html '*ngFor="let extra of getArrayControls();index as i"
What I hate now about Angular 6 is I have 2 errors and I can't figure out how to fix them. Your tutorials are great but if I or someone else builds the code wrong and gets errors, it is incredibly hard to fix them! I've spent many hours trying to eliminate these errors and your code in your blog does not help. It would be nice to have access to the complete code at each stage so that we can get our program working so we can continue on. Now you are releasing new videos and I can't get rid of my errors. And, once I make the new changes, I can't get back to when my program was working earlier. This is extremely frustrating!
The error I receive now is:
ERROR Error: Cannot find control with path: 'skills -> experienceInYears'
at _throwError (forms.js:1720)
at setUpControl (forms.js:1628)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4463)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:4969)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4919)
at checkAndUpdateDirectiveInline (core.js:9239)
at checkAndUpdateNodeInline (core.js:10507)
at checkAndUpdateNode (core.js:10469)
at debugCheckAndUpdateNode (core.js:11102)
at debugCheckDirectivesFn (core.js:11062)
View_CreateEmployeeComponent_5 @ CreateEmployeeComponent.html:93
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11306
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719
(anonymous) @ core.js:4578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578
(anonymous) @ core.js:4462
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3820
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3734
next @ core.js:4462
schedulerFn @ core.js:3551
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535
checkStable @ core.js:3789
onHasTask @ core.js:3833
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4345
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78
0 @ custom.validators.ts:15
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
CreateEmployeeComponent.html:93
I finally eliminated my errors but I'm still seeing some problems. The phone field doesn't show the required message after losing focus and the required messages for the skills fields are shown but are not in red. I'll keep working and try to get these fixed.
@@josephregallis3394 I had a similar problem. I had misspelled formArrayName as FormArrayName. Angular did not like the upper case F.
@@josephregallis3394 Remember to bind the the (blur) event of the input box and call logValidationErrors. (blur)='logValidationErrors(). For the red coloring, make sure your spans have the bootstrap class, class="help-block".
How to show the skills form in a new pop up modal instead of showing one after the other in same form. Could you help.
very nice. Where can I find the complete code?
Thank you so much!!!
how to create dynamic forms in angular throw json schema forms and how to reset, setvalue.
How to save the newly added form controls data to a service? How to bind the same ?
Hi Sunil - Great Questions. We will cover both these scenarios in our upcoming videos in this series. Please stay tuned.
how can I disable this add skill button after one click????
CreateEmployeeComponent.html:86 ERROR TypeError: this.employeeForm.get(...).push is not a function
Can anyone help me on fixing this issue.
(this.employeeform.get('skills')).push(this.addformgroup());
Does anyone else has this error: Cannot find control with path: 'skills -> proficiency'?
Great
getting error Cannot find control with path:
im trying to addskill but not added ....another one
U r great
Sir
how to update this dynamic formarray ?
clear the form and re-update it
*ngFor="let skill of employeeForm.get('skills')['controls']; let i = index;"
If this doesn't work either then try adding a getter function in ts file to retrieve the form array as
get skillSets(){return this.employeeForm? this.employeeForm.get('skills') as FormArray:null}
and then in html code add *ngFor="let skill of skillSets.controls; let i=index"
with angular version 15 , try this it will work. *ngFor="let skill of employeeForm.get('skills')?.value; let i = index