Angular: Cannot Find Control With Path: 'variable-> 0 -> Id'

I have been trying to use FormArray for a div that is dynamically added by the user, but I can't find the controls for the user inputs! I always have the error: Error: Cannot find

Solution 1:

You're using [formGroupName] incorrectly. In your line with <div [formGroupName]="i">, you are trying to get the formGroupName via the index i, which won't work because you have not created any FormGroups that have a number as a name.

I believe the Angular tutorial on reactive forms will help you, specifically the part about FormArrays and dynamic controls: https://angular.io/guide/reactive-forms#dynamic-controls-using-form-arrays

To fix your problem, you probably need do the following changes.

HTML:

Change <div [formGroupName]="i"> to <div [formGroup]="textoAvisos.controls[i]">

or

change *ngFor="let disparaEmail of disparaEmails; let i=index" to *ngFor="let formGroup of textoAvisos.controls; let i=index"

The first example change is provided below.

<formstyle="text-align: center;" [formGroup]="janelaAtualizacaoForm" (ngSubmit)="cadastrarJanelaAtualizacao()"><div *ngFor="let disparaEmail of disparaEmails; let i=index"formArrayName="textoAvisos"class="ui-g-4"style="margin-right: 10px; border: 1px solid #c8c8c8; border-radius: 5px; min-width: 466.828px;"><div [formGroup]="textoAvisos.controls[i]"><pclass="titulo-campo font1 fw700">Assunto:</p><textareapInputTextarea [rows]="2"formControlName="assTipo"requiredstyle="width: 100%; resize:unset; font-size: 18px;"></textarea><pclass="titulo-campo font1 fw700">Tipo de Aviso:</p><p-editor [style]="{'height':'300px'}"formControlName="msgTipo"required></p-editor><pclass="titulo-campo font1 fw700">Data:</p><p-calendar [readonlyInput]="true"formControlName="dataTipo"dateFormat="dd/mm/yy"showButtonBar="true" [locale]="localeService.getLocale()"[monthNavigator]="true" [yearNavigator]="true"yearRange="2018:2050"required></p-calendar></div></div></form>

Typescript:

Remove the surrounding FormControl from your FormGroup in textoAvisos and add a getter for textoAvisos. Without this getter, you will get an error regarding textoAvisos being undefined. What tripped us up was that we were using textoAvisos in formArrayName="textoAvisos, but you are able to use textoAvisos like that because formArrayName explicitly looks for a formArray on the janelaAtualizacaoForm. When we try to do textoAvisos.controls in the *ngFor we get an error because we don't actually have a property in our component class to bind too with that name, since textoAvisos exists only as an element on the janelaAtualizacaoForm form.

constructor(private janelaAtualizacaoService: JanelaAtualizacaoService,
    private segmentoInfoService: SegmentoInformacaoService,
    private empresaService: EmpresaService,
    private route: ActivatedRoute,
    private router: Router, private fb: FormBuilder, private location: Location,
    private changeDetector: ChangeDetectorRef, private localeService: LocaleService
) {
    this.criarJanelas();
}

publicgettextoAvisos() {
    returnthis.janelaAtualizacaoForm .get('textoAvisos') asFormArray;
}

criarJanelas() {
    this.janelaAtualizacaoSelecionado = [];
    this.janelaAtualizacaoForm = newFormGroup({
        textoAvisos: newFormArray([
            newFormGroup({
                assTipo: newFormControl('', [Validators.required]),
                msgTipo: newFormControl('', [Validators.required]),
                dataTipo: newFormControl('', [Validators.required])
            })
        ])
    });
}

I have not tested these in a live environment but hopefully they will solve your problem.