1

I have angular reactive form consisting of few FormControl and one FormArray element.

competitionForm!: FormGroup;    
    
this.competitionForm = new FormGroup({
  name: new FormControl(this.competition.name, []),
  about: new FormControl(this.competition.about, []),
  rules: new FormControl(this.competition.rules, []),
  competitorNames: new FormArray([]),
});

competitorNames contains array of FormControl with string as a value. I connected competitionForm with form on my html template. I am using custom input (app-input) component. It gets FormControl as input: [control].

<form [formGroup]="competitionForm">    
    <div formArrayName="competitorNames">
        <ng-container *ngFor="let competitor of refCompetitorNames.controls">
          <app-input
            [control]="$any(competitor)"
            [placeholder]="'name'"
            [type]="'text'"
          ></app-input>
        </ng-container>
      </div>
</form>

get refCompetitorNames() {
  return this.competitionForm.get('competitorNames') as FormArray;
}

Getting form data with this.competitionForm.value.competitorNames is always returning same data. It does not change when I enter new value in input element. Also, input elements are displayed with values inside. That means template form is binded with competitionForm.

This approach works when used on FormControl, but there is a problem with FormArray elements. Here is how template looks for single FormControl. Here I get updated data (if any input is changed) as I should.

Difference is in how I pass control.

<form [formGroup]="competitionForm">    
    <app-input
        [control]="$any(competitionForm.controls).name"
        [placeholder]="'name'"
        [type]="'text'"
      ></app-input>
</form>

edit: Problem solved

I found where was the problem. Solution is to access form data in different way. With this.refCompetitorNames.at(i).value I get correct data.

I still don't know why this.competitionForm.value.competitorNames is not returning updated data (only in this case with FormArray).

Improve this question
6
  • I push formcontrols with data I get from backend. That data is displayed, only problem is about editing. Commented May 6, 2023 at 13:54
  • I've used a similar approach before but I haven't used it with ng-container. This is total shot in the dark, but maybe move your *ngFor down to the app-input element. It might be that using it with ng-container is causing some issue that I couldn't explain without examining the source code Commented May 6, 2023 at 14:41
  • Found solution, look at edit. Commented May 6, 2023 at 15:34
  • Thanks for the suggestion, I tried moving *ngFor to app-input but it didn't solve the issue. (anyway I found other solution that works) Commented May 6, 2023 at 15:40
  • glad you found something! you should share your solution for anyone looking later edit: post as answer I mean Commented May 8, 2023 at 14:58

1 Answer 1

Reset to default
1

I found where was the problem. Solution is to access form data in different way. With this.refCompetitorNames.at(i).value I get correct data.

I still don't know why this.competitionForm.value.competitorNames is not returning updated data (only in this case with FormArray).

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

In old versions of Angular there're a "delay" between this.refCompetitorNames.at(i).value and this.competitionForm.value.competitorNames (in a submit the two values are the same). I don't know when you want to access the value or what version of Angular you're using -I think, but not sure, since Angular 12 always have the same value-
Two values weren't same on submit. That is how I noticed bug. I have edit form where name, about and rules were updated but not competitorNames. After printing it's value I saw it is always the same. I am using Angular 14.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.