Angular: не удается найти элемент управления с путем: 'variable-> 0 -> id'

Question

Я пытался использовать FormArray для div, который динамически добавляется пользователем, но я не могу найти элементы управления для пользовательских вводов! У меня всегда ошибка:

Ошибка: не удается найти элемент управления с путем: 'textoAvisos -> 0 -> assTipo'

Ошибка: не удается найти элемент управления с путем: 'textoAvisos -> 0 -> msgTipo'

Ошибка: не удается найти элемент управления с путем: 'textoAvisos -> 0 -> dataTipo'

Div содержит 3 входа, которые пользователь должен вставить, и кажется, что элемент управления не может их найти. Новый div добавляется после того, как пользователь нажимает кнопку, поэтому он должен быть динамическим, но это не проблема. На данный момент мне не нужно беспокоиться о push-вставке, так как мне нужно сначала проверить ввод от пользователя!

Вот HTML:

<form style="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 [formGroupName]="i">
            <p class="titulo-campo font1 fw700">Assunto:</p>
            <textarea pInputTextarea [rows]="2" formControlName="assTipo" required style="width: 100%; resize:unset; font-size: 18px;"></textarea>

            <p class="titulo-campo font1 fw700">Tipo de Aviso:</p>
            <p-editor [style]="{'height':'300px'}" formControlName="msgTipo" required></p-editor>

            <p class="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>

А вот и ТС:

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();
}

criarJanelas() {
    this.janelaAtualizacaoSelecionado = [];
    this.janelaAtualizacaoForm = new FormGroup({
        textoAvisos: new FormArray([
            new FormControl(
                new FormGroup({
                    assTipo: new FormControl('', [Validators.required]),
                    msgTipo: new FormControl('', [Validators.required]),
                    dataTipo: new FormControl('', [Validators.required])
                })
            )
        ])
    });
}

Спасибо за помощь, всем!

Answer 1

Вы используете [formGroupName] неправильно. В вашей строке с <div [formGroupName]="i"> вы пытаетесь получить formGroupName через индекс i, который не будет работать, потому что вы не создали ни одной группы FormGroup, в которой в качестве имени указан номер.

Полагаю, вам поможет учебник по Angular по реактивным формам, особенно часть о FormArrays и динамических элементах управления: https://angular.io/guide/reactive-forms#dynamic-controls-using-form-arrays

Чтобы исправить вашу проблему, вам, вероятно, нужно внести следующие изменения.

HTML:

Изменить <div [formGroupName]="i"> на <div [formGroup]="textoAvisos.controls[i]">

или

изменить *ngFor="let disparaEmail of disparaEmails; let i=index" на *ngFor="let formGroup of textoAvisos.controls; let i=index"

Первое примерное изменение приведено ниже.

    <form style="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 [formGroupName]="textoAvisos.controls[i]">
            <p class="titulo-campo font1 fw700">Assunto:</p>
            <textarea pInputTextarea [rows]="2" formControlName="assTipo" required style="width: 100%; resize:unset; font-size: 18px;"></textarea>

            <p class="titulo-campo font1 fw700">Tipo de Aviso:</p>
            <p-editor [style]="{'height':'300px'}" formControlName="msgTipo" required></p-editor>

            <p class="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>

Машинопись:

Удалите окружающие FormControl из вашего FormGroup в textoAvisos и добавьте геттер для textoAvisos. Без этого получателя вы получите сообщение об ошибке textoAvisos, которая не определена. Что нас удивило, так это то, что мы использовали textoAvisos в formArrayName="textoAvisos, но вы можете использовать textoAvisos как этот, потому что formArrayName явно ищет formArray в janelaAtualizacaoForm. Когда мы пытаемся сделать textoAvisos.controls в *ngFor, мы получаем ошибку, потому что на самом деле в нашем классе компонентов нет свойства для привязки с этим именем, поскольку textoAvisos существует только как элемент в janelaAtualizacaoForm форма.

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();
}

public get textoAvisos() {
    return this.janelaAtualizacaoForm .get('textoAvisos') as FormArray;
}

criarJanelas() {
    this.janelaAtualizacaoSelecionado = [];
    this.janelaAtualizacaoForm = new FormGroup({
        textoAvisos: new FormArray([
            new FormGroup({
                assTipo: new FormControl('', [Validators.required]),
                msgTipo: new FormControl('', [Validators.required]),
                dataTipo: new FormControl('', [Validators.required])
            })
        ])
    });
}

Я не проверял их в реальных условиях, но надеюсь, что они решат вашу проблему.