在FormControl中引用FormArray元素
在FormControl中引用FormArray元素
提问于 2018-03-02 22:32:14
我似乎无法找到在组件模板中引用表单控件的方法。
虽然我将表单组(从<form>标记)传递到这个子组件中，但我知道我有一个有效的FormGroup对象结构，因为我可以看到来自console.log(this.f.getRawValue())的原始输出：
abn:""
addressLine1:""
addressLine2:""
addressLine3:""
addressPostcode:""
addressState:""
addressSuburb:""
contactEmail:""
contactFax:""
contactMobile:""
contactPhone:""
fcApprovals:Array(1)
0:
approvalNumber:""
description:""
expires:Sat Mar 03 2018 17:07:50 GMT+1100 (AEDT) {}这正是我所期望的进入html表单的对象结构。
<div *ngIf="f.get('fcApprovals')" [formGroup]="f" class="block-container center form-panel not-full-width">
<div class="panel-title">Approvals</div>
<div class="block-container center not-full-width" formArrayName="fcApprovals"
*ngFor="let approval of f.get('fcApprovals').controls; let i = index;">
<div class="block-element pad-me-up" [formGroupName]="i">
<div class="form-group" [ngClass]="{
'has-danger': description.invalid && description.dirty,
'has-success': description.valid && description.dirty}">
<input type="text" class="form-control" placeholder="Description" name="description"
formControlName="description" required/>
<div *ngIf="description.untouched || description.valid"
class="ui message">Description
</div>
<div *ngIf="description.dirty || description.touched">
<div *ngIf="description.errors.required"
class="ui error message">Description is required
</div>
</div>
<div class="icon description"></div>
</div>这一页之后会继续，但上面的内容才是最重要的。问题是，引用“描述”是没有定义的。
我曾尝试过以下的推介：
i.description
approval.description
fcApprovals[i].description
fcApprovals[i].control.description还有更多。似乎什么都起不到作用。我得到的错误是：
ApprovedComponent.html:6 ERROR TypeError: Cannot read property 'invalid' of undefined
at Object.eval [as updateDirectives] (ApprovedComponent.html:8)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14651)
at checkAndUpdateView (core.js:13798)
at callViewAction (core.js:14149)
at execEmbeddedViewsAction (core.js:14107)
at checkAndUpdateView (core.js:13799)
at callViewAction (core.js:14149)
at execEmbeddedViewsAction (core.js:14107)
at checkAndUpdateView (core.js:13799)
at callViewAction (core.js:14149)错误引用描述引用上方的FormArray迭代，但属性“无效”首先出现在描述中。
那么，如何引用这些控件及其值呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-02 23:12:56
答案是：approval.get('description')
我碰巧在一篇无关的文章中偶然发现了一篇关于这一点的文章。它绝对是文档的好候选人，因为我不可能猜到这一点！
关键就在我的打字稿里。
return this.fb.group({
'description': ['', Validators.required],
'approvalNumber': ['', Validators.required],
'expires': new Date(),
});实际上，我将这三个控件放在一个组中，所以我迭代了一个包含一个或多个FormArray的FormGroups - golly！
但奇怪的是，错误对象似乎不在同一条路径上，因为：
approval.get('description').errors.required返回“无法读取属性‘必选’的空”
我花了大约9个小时在这上面！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49081383
复制相关文章
点击加载更多
相似问题
Angular FormArray:引用模板中动态添加的FormControl
从formArray中删除FormControl
在FormGroup inside FormArray中访问FormControl
FormControl / FormGroup / FormArray值类型
以FormControl而不是FormArray的形式返回FormArray
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
