Angular：找不到带有路径的控件：'variable-> 0 -> id'

Posted 2023-02-22

【中文标题】Angular：找不到带有路径的控件：\'variable-> 0 -> id\'

【英文标题】：Angular: Cannot find control with path: 'variable-> 0 -> id'Angular：找不到带有路径的控件：'variable-> 0 -> id'

【发布时间】：2019-04-02 18:57:39

【问题描述】：

我一直在尝试将 FormArray 用于用户动态添加的 div，但我找不到用户输入的控件！我总是有错误：

错误：找不到带有路径的控件：'textoAvisos -> 0 -> assTipo'

错误：找不到带有路径的控件：'textoAvisos -> 0 -> msgTipo'

错误：找不到带有路径的控件：'textoAvisos -> 0 -> dataTipo'

div 包含用户需要插入的 3 个输入，但控件似乎找不到它们。用户单击按钮后会添加一个新的 div，因此它需要是动态的，但这不是问题。我暂时不需要担心推送插入，因为我需要先验证用户的输入！

这是 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>

这里是 TS：

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])
                )
            )
        ])
    );

谢谢大家的帮助！

【参考方案1】：

您错误地使用了[formGroupName]。在<div [formGroupName]="i"> 的行中，您正试图通过索引 i 获取 formGroupName，这将不起作用，因为您尚未创建任何以数字为名称的 FormGroups。

我相信关于响应式表单的 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 [formGroup]="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>

打字稿：

从textoAvisos 中的FormGroup 中删除周围的FormControl，并为textoAvisos 添加一个getter。如果没有这个 getter，您将收到关于 textoAvisos 未定义的错误。让我们感到困惑的是，我们在formArrayName="textoAvisos 中使用了textoAvisos，但是您可以像这样使用textoAvisos，因为formArrayName 明确地在janelaAtualizacaoForm 上查找formArray。当我们尝试在*ngFor 中执行textoAvisos.controls 时，我们会收到错误消息，因为我们的组件类中实际上没有属性可以与该名称绑定，因为textoAvisos 仅作为@987654342 上的元素存在@表单。

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])
            )
        ])
    );

我没有在实际环境中测试过这些，但希望它们能解决您的问题。

【讨论】：

我已经阅读了数十次并按照您显示的指南进行操作，我只使用了一个输入字段作为测试（使用“i”作为 formControlName）。当我第一次运行页面时，我没有收到类似上面的错误消息，但是在我添加了一个新的 div 之后，我收到了以下错误：Cannot find control with path: 'textoAvisos -> 1'。我不知道为什么我收到了。

您现在拥有代码的方式是尝试在 textoAvisos 上检索名称为 0、1、2 等的 FormGroup。这是行不通的，因为您的 FormArray 上没有具有这些名称的 FormGroup。我会用我认为你需要做的事情来更新我的答案。

哦！我现在明白你的意思了，通过在控件上使用数组，你可以访问每个不同的 div。我想我可能没有添加任何东西，因为我在上面解释的两种方法中都遇到了这个错误：Error: Cannot read property 'controls' of undefined.

您可能需要在 *ngFor 之外添加另一个包含 formArrayName 指令的 div，如下所示： ... *ngFor 和其他 html

您需要尝试一下并弄清楚为什么textoAvisos 未定义。我稍后会尽力提供帮助。