时间戳

首页 > 解决方案 > 角度反应来自。表单数组。找不到带路径的控件

angular - 角度反应来自。表单数组。找不到带路径的控件

问题描述

我想输出一个表单，其中一个字段是一个数组，对于数组的每个元素，我需要输出我的输入。

零件：

userData.contacts = [
{contact_type: "phone", value: "380666666666"},
{contact_type: "email", value: "ggg@gg.gg"},
{contact_type: "website", value: "www.good.co"}
];

this.contactInfoForm = new FormGroup ({
          contacts: this.fb.array (userData.contacts)
        });

HTML：

 

<form [formGroup] = "contactInfoForm" novalidate (ngSubmit) = "submit ('contactInfoForm')">
<div formArrayName = "contacts" * ngFor = "let contact of contactInfoForm.get ('contacts'). controls; let i = index;">
              <div formGroupName = "i">
                <label> {{contact.value.contact_type}} </ label>
                <input formControlName = "value">
              </ div>
            </ div>
</ form>

如果在控制台中推断出有一个对象与一堆数据的形式。

 

  asyncValidator: null
controls:
contacts: FormArray
asyncValidator: null
controls: Array (3)
0: FormControl {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, ...}
1: FormControl {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, ...}
2: FormControl {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, ...}
length: 3
__proto__: Array (0)
dirty: (...)
disabled: (...)
enabled: (...)
errors: null
invalid: (...)
length: (...)
parent: (...)
pending: (...)
pristine: true
root: (...)
status: DISABLED
statusChanges: EventEmitter {_isScalar: false, observers: Array (0), closed: false, isStopped: false, hasError: false, ...}
touched: false
untouched: (...)
updateOn: (...)
valid: (...)
validator: null
value: (3) [{...}, {...}, {...}]
valueChanges: EventEmitter {_isScalar: false, observers: Array (0), closed: false, isStopped: false, hasError: false, ...}
_onCollectionChange: ƒ ()
_onDisabledChange: []
_parent: FormGroup {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, ...}
__proto__: AbstractControl
__proto__: Object
dirty: (...)
disabled: (...)
enabled: (...)
errors: null
invalid: (...)
parent: (...)
pending: (...)
pristine: true
root: (...)
status: DISABLED
statusChanges: EventEmitter {_isScalar: false, observers: Array (0), closed: false, isStopped: false, hasError: false, ...}
touched: false
untouched: (...)
updateOn: (...)
valid: (...)
validator: null
value: {contacts: Array (3)}
valueChanges: EventEmitter {_isScalar: false, observers: Array (0), closed: false, isStopped: false, hasError: false, ...}
_onCollectionChange: ƒ ()
_onDisabledChange: []
__proto__: AbstractControl

我试图以不同的方式获取信息。这没用。即使愚蠢地从互联网上的示例中复制粘贴片段。同样的问题。同样的错误。

错误：

 Cannot find control with path: 'contacts -> 0 -> value'

也试过：

<input [formControlName]="contact.value.value">

得到错误：

联系人 -> 0 -> 380666666666

标签： angularformsangular-reactive-forms

解决方案

您需要FormControl为您的联系人提供元素数组，而不是普通数组。

const formControlArray = [];
userData.contacts.forEach(contact => {
  formControlArray.push(new FormControl(contact.value));
})

this.contactInfoForm = new FormGroup ({
  contacts: this.fb.array(formControlArray)
});

但是，我不确定 FormArray 是否是您用例的最佳选择，因为元素必须具有不同的名称。您也可以通过这种方式动态添加控件：

this.contactInfoForm = new FormGroup({});

userData.contacts.forEach(contact => {
  contactInfoForm.addControl(contact.contact_type, new FormControl(contact.value));
})

推荐阅读