Angular Reactive Forms - FormArray and pacthValue

Question

I'm having trouble using patchValue with formArray. I have a custom select made with <ul>, <li>, the click on an option executes a method that should patch the id of the option selected in an <input type="hidden" /> that will contain the value of the property in the formarray.

This is how the form is built:

  this.roleForm = this.fb.group({
    profiles: this.fb.array([ this.fb.group({perfil: '', accion: ''}) ])
  })

This is the method to add new profiles in the array:

  addProfile() {
    const prof = this.roleForm.get('profiles') as FormArray;
    prof.push(this.fb.group({
      perfil: [''],
      accion: ['']
    }))
  }

And this is the html:

<div class="col-md-8" formArrayName="profiles">
  <div class="row" *ngFor="let profile of getProfiles(); let i = index">
    <div class="col-md-6" [formGroupName]="i">
      <div class="col-12">
        <div class="card card-primary bg-white">
          <div class="card-header h4">
            Perfil
          </div>
          <ul class="list-group list-group-flush register h5 scroll-list">
            <li *ngFor="let profileType of profileTypes; index as i" 
                class="list-group-item rounded-0 pointer" 
                [ngClass]="{'selected bg-primary text-white font-weight-bold': this.selectedProfile === profileType.profileId}" 
                (click)="selectProfile(profileType.profileId, i)">
              {{profileType.profileDescription}}
            </li>
          </ul>
          <input formControlName="perfil" type="text" />
        </div>
      </div>
    </div>
  </div>
</div>

EDIT:

I'd have to use patchValue in this method to set the selected value in the input with the same index. But I can't make the at() method work, this always returns me an undefined:

selectProfile(profileType.profileId, i) {
 let x = (<FormArray>this.roleForm.get('profiles')).at(i);
 console.log(x)
}

How and where are you using patchValue? Can you post that method? — Kari F.
Problem is not clear. Its better if you can also create an stackblitz — Gourav Garg
NOTE: pacthValue NOT add new elements to the array, you need call to your funciton addProfile or a function to remove elements of the array before make pacthValue — Eliseo
Sorry, I updated the question with an edit describing the exact problem I'm having — jenesuispastom
what is profileTypes? looks like roleForm.profiles isn't in sync with whatever that is — bryan60

bryan60 bryan60 · Accepted Answer · 2020-04-12T20:54:40

i'm guessing your problem is a duplicate declaration of template variable i:

<div class="col-md-8" formArrayName="profiles">
  <div class="row" *ngFor="let profile of getProfiles(); let outterI = index"> <!-- declared here -->
    <div class="col-md-6" [formGroupName]="outterI">
      <div class="col-12">
        <div class="card card-primary bg-white">
          <div class="card-header h4">
            Perfil
          </div>
          <ul class="list-group list-group-flush register h5 scroll-list">
            <!-- and here -->
            <li *ngFor="let profileType of profileTypes; index as innerI" 
                class="list-group-item rounded-0 pointer" 
                [ngClass]="{'selected bg-primary text-white font-weight-bold': this.selectedProfile === profileType.profileId}" 
                (click)="selectProfile(profileType.profileId, outterI)">
              {{profileType.profileDescription}}
            </li>
          </ul>
          <input formControlName="perfil" type="text" />
        </div>
      </div>
    </div>
  </div>
</div>

you don't need to declare an index variable when using a ngFor though if you're not using it, as you don't seem to be using innerI in this example.

Angular Reactive Forms - FormArray and pacthValue

1 Answers