CODEWITHSUNDEEP
angularangular-reactive-forms
Givi Gvinianidze
Givi Gvinianidze

Reputation: 1

angular reactive form array

I need reactive form which result will be like this

I tried some codes but something wrong.

[{"account":{ "accountNum": "numbers which user will type in input" }}]

Upvotes: 0

Views: 461

Answers (1)

Eliseo
Eliseo

Reputation: 57909

Givi, you has an array with one element, inside the array an object with a propertie "account" that is another object with a propertie "accountNum" that is a string

myForm=new FormArray([       //an formArray with one element
    new FormGroup({          //that is a formGroup with a propertie "account"
      account:new FormGroup({//that is a formGroup with a propertie "accountNum"
                             //    that is a FormControl
        accountNum:new FormControl("numbers which user will type in input") 
      })
    })
  ])

Too see in the .html

<pre>{{myForm?.value|json}}</pre>

You see that if you has an array you need a FormArray, if you need an object, you need a FormGroup and if you need a value, you need a FormControl. Please, try understand, not simply copy and paste the answer.

Updated show a .html to change the form

Well, you can use a unique formControl

<input [formControl]="myForm.at(0).get('account').get('accountNum')">

But we are going to learn how manage a formArray. Normally if a formArray is a propertie of a formGroup we use some like

<form [formGroup]="myForm">
   <div formArrayName="myArray">
      <div *ngFor="let controls in myForm.get('myArray').controls;
               let i=index">
            <div [formGroupName]="i">
               <!--here the controls of our array-->
            </div>
      </div>
   </div>
</form>

If we can manage an array we need know that a formArray is a formGroup, so we can make some like

   <!--see that we used [formGroup]-->
   <div [formGroup]="myArray"> 
      <div *ngFor="let controls in myArray.controls;
               let i=index">
            <!--see how replace the [formGroupName]="i" by [formGroup]="controls"
                      the variable of the *ngFor -->
            <div [formGroup]="controls">
            <!--here the controls of our array-->
            </div>
      </div>
   </div>

Upvotes: 3

Related Questions