How to inicialize an array with values inside reactive form in Angular

Question

I have this form which has an array called "channel". Everytime that I click on a button, addChanels() is called, and new group is added inside my array. It's working when I create a new registry. But when I need to edit this registry, I need that my form array already have value.

aplicativo = this.activatedRoute.snapshot.data['aplicativo'];

ngOnInit(): void {

    this.form = this._formBuilder?.group({
      id: [this.aplicativo.id],
      name: [this.aplicativo.name, Validators.required],
      version: [this.aplicativo.version, Validators.required],
      appId: [this.aplicativo.appId, Validators.required],
      channel: this._formBuilder?.array([this.aplicativo.channel]),
    });
  }

  get channel() {
    return this.form?.controls['channel'] as FormArray;
  }

  addChanels() {
    const channelArray = this._formBuilder?.group({
      canais: [],
      topicos: [],
    });

      this.channel.push(channelArray);
  }

but angular returns me the error

Cannot find control with path: 'channel -> 0 -> canais'

*html

<button type="button" mat-raised-button color="primary" (click)="addChanels()">Adicionar</button>

          <ng-container formArrayName="channel">
            <ng-container *ngFor="let chan of channel.controls; let i = index">

              <mat-card [formGroupName]="i" class="content flex_content">
                <button type="button" mat-icon-button color="primary" class="close">
                  <mat-icon class="red" (click)="deleteChannels(i)">cancel</mat-icon>
                </button>

                <div class="row">

                  <div class="col">
                    <mat-form-field appearance="outline">
                      <mat-label>Canais</mat-label>
                      <input matInput formControlName="canais" />
                    </mat-form-field>
                  </div>

                  <div class="col">
                    <mat-form-field appearance="outline">
                      <mat-label>Tópicos</mat-label>
                      <input matInput formControlName="topicos" />
                    </mat-form-field>
                  </div>
                </div>
              </mat-card>
            </ng-container>
          </ng-container>

Resolver:

 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (route.params && route.params['id']) {
      return this.aplicativosService.togetAplicativoById(route.params['id']);
    }

    return of({});
  }

routing:

 {
    path: 'configurar-aplicativo',
    component: ConfiguracaoAplicativoComponent,
    resolve: {
      aplicativo: AplicativoResolverGuard,
    },
  },
  {
    path: 'editar-aplicativo/:id',
    component: ConfiguracaoAplicativoComponent,
    resolve: {
      aplicativo: AplicativoResolverGuard,
    },
  },

Hi there, quick question to make sure I understand your question. Do you need to add controls to the FormArray with default values? — Will Alexander
– Will Alexander, Commented Nov 10, 2021 at 16:52
Hi, will. No, add controls is already working using the function "addChanels()". I need that when I click to edit my registry, my form starts with values witch I bring for my object "aplicativos" — Desenv Junior
– Desenv Junior, Commented Nov 10, 2021 at 16:59
Sorry that's what I meant. Can you show the method you have which attempts to patch the values of the array controls? — Will Alexander
– Will Alexander, Commented Nov 10, 2021 at 17:05
I'm using resolver to initiate my form in ngoninit, if there's no id, I just set the properties to empty. I edited my question and put all the code — Desenv Junior
– Desenv Junior, Commented Nov 10, 2021 at 17:31

AVJT82 · Accepted Answer · 2021-11-10 18:48:35Z

I suggest you turn on strict mode, or something so that typescript can tell you in IDE what you are actually doing wrong.

You would have gotten an error when doing this:

channel: this._formBuilder?.array([this.aplicativo.channel]),

Something in the line that:

this.aplicativo.channel is missing the following properties from AbstractControl....

So what you need to actually do is to push formgroups into the array (AbstractControl is the base class, thus the error), you cannot just put a "regular" array in. So I suggest the following:

form!: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

ngOnInit() {
  this.form = this._formBuilder.group({
    channel: this._formBuilder.array([])
  });
  this.build();
}

// add form controls
build() {
 // DON'T use "any", type your data, being lazy just for the sake of the demo...
 this.aplicativo?.channel.map((x: any) => {
   (this.form.get('channel') as FormArray).push(this._formBuilder.group({
     topicos: [x.topicos],
     canais: [x.canais]
   }))
 })
}

Now you are inserting formgroups into the formarray!

Collectives™ on Stack Overflow

How to inicialize an array with values inside reactive form in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related