Question

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

错误：找不到路径为“ 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])
                })
            )
        ])
    });
}

谢谢大家的帮助！

Answer 1

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

我相信有关反应形式的Angular教程将为您提供帮助，特别是有关FormArrays和动态控件的部分：documentation

要解决您的问题，您可能需要进行以下更改。

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在{{1 }}。当我们尝试在janelaAtualizacaoForm中执行textoAvisos.controls时，会收到一个错误消息，因为我们实际上在组件类中没有一个属性也要使用该名称进行绑定，因为*ngFor仅存在于textoAvisos表单上的元素。

janelaAtualizacaoForm

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

角度：无法找到路径为：“变量-> 0-> id”的

1 个答案: