html - Angular:找不到带有路径的控件:'variable-> 0 -> id'
问题描述
我一直在尝试将 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])
})
)
])
});
}
谢谢大家的帮助!
解决方案
你使用[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>
打字稿:
FormControl
从你的FormGroup
in移除周围textoAvisos
并为textoAvisos
. 如果没有这个 getter,您将收到关于textoAvisos
未定义的错误。让我们感到困惑的是我们在使用textoAvisos
in formArrayName="textoAvisos
,但是您可以这样使用textoAvisos
,因为在. 当我们尝试在其中执行时,我们会得到一个错误,因为我们的组件类中实际上没有一个属性可以与该名称绑定,因为它仅作为表单上的一个元素存在。formArrayName
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])
})
])
});
}
我没有在现场环境中测试过这些,但希望它们能解决你的问题。
推荐阅读
- kotlin - Kotlin 接口函数作为表达式主体
- sql - 使用 SQL 查询获取 WooCommerce 产品类别缩略图 ID
- javascript - 为什么 Firestore 查询的网络选项卡中的“内容已下载”超过一分钟?
- amazon-web-services - AWS Amplify 设置管理 UI 需要很长时间
- angular - 自定义验证器在 Angular 10 的 FormGroup 中不起作用
- python - 获取 ModuleNotFoundError:没有名为“雪花”的模块,同时使用 Python 加载数据
- python - 将相机坐标转换为世界坐标
- python - Python 列表列表,取每个索引元素的模
- openid-connect - 如何在 HashiCorp Vault 中启用 oidc 插件?
- typescript - Emacs LSP 模式 - 是否可以避免鼠标单击来完成建议的操作?