Angular 10 Tutorial #69 - Reactive Forms - FormArray | Angular 10 Tutorial For Beginners

Поділитися
Вставка
  • Опубліковано 23 січ 2025

КОМЕНТАРІ • 89

  • @dearrraed
    @dearrraed 3 роки тому +4

    Great tutorial, I watch and practice all videos, thank you !

  • @vaibhavsharma5254
    @vaibhavsharma5254 3 роки тому +9

    for all those who are getting this error: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?.. here is how i solved the problem.
    This issue happens because angular is not able to recognize that addLoanTypesForm.controls.users is of FormArray type. That's why in html, it can't access the controls property of addLoanTypesForm.controls.users
    To make it work, add a getter method to return the above expression as FormArray type in component.ts file:
    get FrmArr() {
    return this.addLoanTypesForm.controls.users as FormArray;
    }
    then in html, loop through its controls as:

    Hope this helps.

    • @ohadcohen2
      @ohadcohen2 3 роки тому

      Thanks' a lot. initially i placed the getter method inside the 'ngOnInit' - which was wrong. as soon as i moved it outside It worked.

    • @mumps59
      @mumps59 2 роки тому

      Bless you! Curious though, is there no way to cast the expression somehow to a FormArray without creating a getter?

    • @sudha.i4593
      @sudha.i4593 2 роки тому

      property 'Users' comes from an index signature, so it must be accessed with ['Users'] .
      i followed your comment, i got this error....plzz help me if u know this error...tq

    • @amanjain3698
      @amanjain3698 2 роки тому

      I am also getting same error how can i solve it please help me

    • @nithinvh3486
      @nithinvh3486 2 роки тому

      @@amanjain3698
      HTML FILE
      forms works!
      User First Name

      User Last Name



      Users






      Submit
      ---------------------------------
      import { Component, OnInit } from '@angular/core';
      import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
      @Component({
      selector: 'app-forms',
      templateUrl: './forms.component.html',
      styleUrls: ['./forms.component.css']
      })
      export class FormsComponent implements OnInit {
      formTest!: FormGroup;

      constructor(private fb:FormBuilder) { }
      ngOnInit(): void {

      this.formTest = this.fb.group({
      'userfName': new FormControl("Nithin", [
      Validators.required,
      Validators.minLength(5)]
      ),
      'userlName': new FormControl("Haridas"),
      'users': new FormArray([
      new FormControl('ARC'),
      new FormControl('Tutorial')
      ])
      })

      }
      get formArray() {
      return this.formTest.get('users') as FormArray
      }
      }

  • @mohanravulapalli3371
    @mohanravulapalli3371 3 роки тому +1

    Way of explaining is amazing.Thank you

  • @ahmadrizalhashim7553
    @ahmadrizalhashim7553 3 роки тому +2

    Thank You,Sir...it's a good tutorial on formArray...Marvellous!!!

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Thank you so much buddy for your kind words

  • @technova3629
    @technova3629 2 роки тому +1

    Great Tutorials.... Loving It....
    Request:-
    Sir please make video on Angular Form... getting Files through Input...and storing it in array or database.....and also add some features like to change the file names...please use Form control or template driven form or any external package for that.... please please please.....Thank You

  • @bhuvneshkumar08
    @bhuvneshkumar08 3 роки тому +1

    how to resolve this
    error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?

  • @krisnarusdiono1304
    @krisnarusdiono1304 3 роки тому

    sir, i got this errror Type '{ [key: string]: AbstractControl; }' is not assignable to type 'NgIterable | null | undefined'. in my template files while i do loop of my FormArray, what should i do?

  • @sowmyakarumanchi2826
    @sowmyakarumanchi2826 3 роки тому +1

    Greatly explained

  • @harishkumar-so4tq
    @harishkumar-so4tq 2 роки тому +1

    Thanks lot for the wonderful explanation

  • @ginthiyaz8249
    @ginthiyaz8249 Рік тому

    Hi your explanation is amazing, can you tell me how to add a value to dropdown dynamically for each drop down, if i have 10 dropdown dynamically. i will get 10 value i need to push each value to single drop down.

  • @ibraheemsahawi
    @ibraheemsahawi 3 роки тому +1

    Sir i need help in my angular app.. my app compiled successfully but in the web browser its just running and display message of page unresponsiveness

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Ibraheem. Can you please check your developer console and see what errors you are seeing? Send me screenshot of errors at soorya.aaradhya@gmail.com

  • @pradipthigale1193
    @pradipthigale1193 2 роки тому

    Hi @Shridhar,
    Many thanks for the tutorials.
    I am facing one issue, can you please help me out
    Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?
    32
    Thanks

  • @rishimadcow3736
    @rishimadcow3736 3 роки тому

    Hi Sir,
    I am getting following error.
    Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?
    Please help me.
    Thanks in advance 😊.

  • @Programming162
    @Programming162 2 роки тому

    error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?

  • @RoamingSuraj
    @RoamingSuraj 3 роки тому

    Please any one help me out. Arc value not display in textbox. Also given error cannot find control with name:0

  • @chandrakanths4065
    @chandrakanths4065 2 роки тому

    Hi , I followed the same steps but I am getting error in the html while adding ngfor , it says property 'controls' does not exist on type 'AbstractControl. Please help me out how to solve this issue

    • @lalithareddy2712
      @lalithareddy2712 2 роки тому +1

      I was able to resolve the same issue by changing the HTML code to

      then added the getControls method in the ts file
      getControls(form: FormGroup, key: string){
      return (form.controls[key]).controls;
      }
      Please check this out if this works for you too.

    • @manikumar9645
      @manikumar9645 2 роки тому

      @@lalithareddy2712 it's working thanks for effort.

  • @AngularReactNodeJSJavascript
    @AngularReactNodeJSJavascript 3 роки тому +1

    error TS2339: Property 'i' does not exist on type 'LoanComponent'. generating this error

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Send me code snippet and console error at soorya.aaradhya@gmail.com

    • @AT-ks6lm
      @AT-ks6lm 3 роки тому

      @@ARCTutorials what is the solution for this error?

  • @amarnath602
    @amarnath602 3 роки тому

    Hello Sridhar,
    You're always awesome.
    Somehow in my continuity, the #70 and #69 are swapped, not an issue.
    In this section, we are looping the value in the template and what is the use of the control variable as we are not using it anywhere.
    Thanks

  • @eduardoflores1603
    @eduardoflores1603 3 роки тому +1

    Is this the same for angular 11?

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Yes its all same. Happy learning 👍

  • @balakrishnareddy5324
    @balakrishnareddy5324 3 роки тому

    Hi Sir,
    *ngFor="let control of addLoanTypesForm. Controls. users['controls]
    Not working.. For me..
    Can you please help
    Can you please suggest

  • @saalimhussain6635
    @saalimhussain6635 3 роки тому +1

    Hi Sir ,
    Waiting for your tutorial..

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Saalim. Was totally occupied with office work. Should roll again soon

  • @toannew
    @toannew 3 роки тому +1

    thank so much

  • @ashutoshmishra3492
    @ashutoshmishra3492 3 роки тому +2

    Sir please complete this series fast🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾

  • @nksingh9823
    @nksingh9823 3 роки тому +1

    Thank You Sir

  • @deepakheerakari807
    @deepakheerakari807 3 роки тому

    error TS4111: Property 'users' comes from an index signature, so it must be accessed with ['users'].
    15
    why I am getting this error?

    • @shivyapant9191
      @shivyapant9191 2 роки тому

      did you find the solution to this? I am getting the same error?

    • @shahalam-ei4cm
      @shahalam-ei4cm Рік тому

      me too@@shivyapant9191

  • @alkanawatikhaled
    @alkanawatikhaled 5 місяців тому +1

    Hahaha fb not facebook but formbuilder :P
    thanks for the tutorial man !

  • @FutureB
    @FutureB 2 роки тому

    Element implicitly has an any type because expression of type '"controls'" can't be used to index type 'abstractControl

    • @sanjayadtani
      @sanjayadtani 2 роки тому +1

      In ts file...
      get formArr() {
      return this.addUserForm.controls["users"] as FormArray;
      }
      in html file....
      Try making these changes it worked of me.

  • @afzalhossain4142
    @afzalhossain4142 3 роки тому +1

    nice

  • @visheshpatel6667
    @visheshpatel6667 3 роки тому

    Hello SHRIDHAR
    Can you help me for below error?
    Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?ngtsc(7052)

    • @nithinvh3486
      @nithinvh3486 2 роки тому

      HTML FILE
      forms works!
      User First Name

      User Last Name



      Users






      Submit
      ---------------------------------
      import { Component, OnInit } from '@angular/core';
      import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
      @Component({
      selector: 'app-forms',
      templateUrl: './forms.component.html',
      styleUrls: ['./forms.component.css']
      })
      export class FormsComponent implements OnInit {
      formTest!: FormGroup;

      constructor(private fb:FormBuilder) { }
      ngOnInit(): void {

      this.formTest = this.fb.group({
      'userfName': new FormControl("Nithin", [
      Validators.required,
      Validators.minLength(5)]
      ),
      'userlName': new FormControl("Haridas"),
      'users': new FormArray([
      new FormControl('ARC'),
      new FormControl('Tutorial')
      ])
      })

      }
      get formArray() {
      return this.formTest.get('users') as FormArray
      }
      }

  • @ShishupalSingh-zb2sk
    @ShishupalSingh-zb2sk 3 роки тому

    could you pls share me the ppt of whole tutorial

  • @pradheepthiru7917
    @pradheepthiru7917 3 роки тому

    Hi, I am getting the error after compiling "ERROR Error: Cannot find control with path: 'users -> 0 -> '"

    • @jnanaprakahp9255
      @jnanaprakahp9255 3 роки тому +1

      check the spelling of [formGroupName] = i, its works for me

  • @ShishupalSingh-zb2sk
    @ShishupalSingh-zb2sk 3 роки тому +1

    In my opinion all Angular is like memorising everything rather than understanding.

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Shishupal. I understand you are having tough time in initial phases, but trust me down the line it will be very useful.

  • @toannew
    @toannew 3 роки тому

    18:23, 18:08, 18:34, 18:51
    21:54, 23:04 -> 25:06

  • @kattimanigangadhar5090
    @kattimanigangadhar5090 3 роки тому +1

    Sir, Please start Angular11 Series, Thank you.

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Hi Gangadhar. I will soon be starting a live project on Angular 11

    • @kattimanigangadhar5090
      @kattimanigangadhar5090 3 роки тому

      Thank you.

    • @zoltanrakottyai
      @zoltanrakottyai 3 роки тому +1

      @@ARCTutorials Are you planning to cover the whole Angular topic, like you did from v9 to v10, or just the differences?

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      @@zoltanrakottyai i will cover all aspects as much details as i can in Angular 10 as well

  • @amanjain3698
    @amanjain3698 2 роки тому

    I am getting error every time in this line any soluation please help me

  • @varunraigir6180
    @varunraigir6180 2 роки тому

    Hi sir, I am getting an error which shows "error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?"
    can you help me solve this?

    • @nithinvh3486
      @nithinvh3486 2 роки тому

      HTML FILE
      forms works!
      User First Name

      User Last Name



      Users






      Submit
      ---------------------------------
      import { Component, OnInit } from '@angular/core';
      import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
      @Component({
      selector: 'app-forms',
      templateUrl: './forms.component.html',
      styleUrls: ['./forms.component.css']
      })
      export class FormsComponent implements OnInit {
      formTest!: FormGroup;

      constructor(private fb:FormBuilder) { }
      ngOnInit(): void {

      this.formTest = this.fb.group({
      'userfName': new FormControl("Nithin", [
      Validators.required,
      Validators.minLength(5)]
      ),
      'userlName': new FormControl("Haridas"),
      'users': new FormArray([
      new FormControl('ARC'),
      new FormControl('Tutorial')
      ])
      })

      }
      get formArray() {
      return this.formTest.get('users') as FormArray
      }
      }

  • @kinzangchedup3162
    @kinzangchedup3162 3 роки тому

    There need to be improve lot with your teaching. it is not enough to have work done, we need to be professional. I can see you are trying have your work done at the end of the day. Try making it professional then you will fell difference

  • @samasowmya11
    @samasowmya11 3 роки тому +1

    Sir please tell me u r mail id sir

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Hi Sowmya. Pls send me email at soorya.aaradhya@gmail.com

  • @williamt.roberts4771
    @williamt.roberts4771 2 роки тому

    Same error. Can someone help>

  • @srikanthroxx1646
    @srikanthroxx1646 3 роки тому

    Hi Sir,
    I'm following all your Angular 10 videos Tutorials, Episode #69 getting an error for reference below is the screenshot, pls suggest how to fix and move forward, below error that am facing.
    Parser Error: Unexpected token [, expected identifier or keyword at column 47 in [let control of addLoanTypeForm.controls.users.['controls']; let i=index;] in D:\simpleCRM\src\app\loan-types\loan-types.component.html@41:7
    42

  • @pramilkesarwani3032
    @pramilkesarwani3032 2 роки тому

    error TS4111: Property 'users' comes from an index signature, so it must be accessed with ['users'].
    Solutions : 1. *ngFor="let control of addLoanTypesForm.controls['users']['controls'] ; let i = index"
    2. *ngFor="let control of addLoanTypesForm.get('users')['controls'] ; let i = index"