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 !

    • @ARCTutorials
      @ARCTutorials  3 ปีที่แล้ว +3

      Glad you like them!

    • @shahalam-ei4cm
      @shahalam-ei4cm ปีที่แล้ว

      reply on our error plz@@ARCTutorials

  • @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 !

    • @ARCTutorials
      @ARCTutorials  5 หลายเดือนก่อน

      You're welcome!

  • @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"