How to control formArray without formGroup?

user_9852215 0
Viewed 4039

I have in such situation as I have to pass data to server like below [1, 2, 454, 5456]

And the data in formArray of FormGroup

I tried to create an empty array and then push empty formControl to that array but that doesn't work

    this._fb.group({
      content: this._fb.group({
        question: [null, Validators.required],
        media: [null, Validators.required],
        options: this._fb.array([new FormControl(null), new FormControl(null), new FormControl(null), new FormControl(null)]),
        correct_answer: [null, Validators.required],
      })
    });

I want options data like ['1st option', '2nd option'] But I can't able to define formControlName in template. If I define some it tries to find out the property of index of the formArray.

My expected result ['1st option', '2nd option']

angular-reactive-forms angular javascript
2 Answers

You just need to name the formControls inside your formArray.

user_136616200 
 <! -- inside HTML do --> 
 <form [formGroup]="nameofForm" >
  <div formGroupName="content"> 
 <ng-container formArrayName="options">
    <div *ngFor="let controls of nameOfForm.get('options').controls, let i =index"> 
        <input type="text">  formControlName="i" />
   </div> 
 </ng-container>
</div>
</form>
user_85222460
Related