0

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" }}]
1

1 Answer 1

3

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>
Sign up to request clarification or add additional context in comments.

3 Comments

I wrote like this and it works <3 pastebin.com/raw/2Lu1Twwi something wrong ?
If you has severals fileds (or if your formArray can store more than a unique element), use the code I indicate in the answer. see your example in stackblitz.com/edit/angular-ubckvt?file=src/app/…. It's important you understand that both ways (yours and mine) say the same. You can use formName="..." or [formControl]="myform.get('...')
the formGroup (or the formArray) exist independienty we has an input or not. An the input can get/set the value of the form control using severals ways

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.