entityMap|blocks|key|c7hou|text|如果您想要创建以下数组：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2tu68|item1:+{
++++hobbyList:+Array[0]
++++name:+null
},+
item2:+{
++++hobbyList:+Array[0]
++++name:+null
},+
item3:+{
++++hobbyList:+Array[0]
++++name:+null
}|code-block|syntax|javascript|g17t|然后你只需要使用map函数：|offset|length|style|CODE|8mfrb|let+fooArray+=+['item1',+'item2',+'item3'];
let+desiredArray+=+fooArray.map(a+=>+{
++++let+obj+=+{};
++++obj[a]+=+{
++++++++hobbyList:[],
++++++++name+:+''
++++};
++++return+obj;
});
console.log(desiredArray);|755r1^0|0|0|8|3|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|R|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|S|9|@$J|T|K|U|L|M]]|A|@]|B|$]]|$2|N|4|O|6|E|8|V|9|@]|A|@]|B|$F|G]]|$2|P|4|-4|6|7|8|W|9|@]|A|@]|B|$]]]]

<p>if you want to create the following array:</p>

<pre><code>item1: {
    hobbyList: Array[0]
    name: null
}, 
item2: {
    hobbyList: Array[0]
    name: null
}, 
item3: {
    hobbyList: Array[0]
    name: null
}
</code></pre>

<p>then you need just to use <code>map</code> function:</p>

<pre><code>let fooArray = ['item1', 'item2', 'item3'];
let desiredArray = fooArray.map(a =&gt; {
    let obj = {};
    obj[a] = {
        hobbyList:[],
        name : ''
    };
    return obj;
});
console.log(desiredArray);
</code></pre>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://stackblitz.com/edit/angular-kusdyh?file=src%252Fapp%252Fapp.component.html|blocks|key|e2qib|text|stackblitz|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|8gcof|++public+myForm:+FormGroup;

++ngOnInit()+{
++++this.myForm+=+new+FormGroup({});
++++for(let+item+of+['item1',+'item2',+'item3'])+{
++++++this.myForm.addControl(item,
++++++++new+FormGroup({
++++++++++name:+new+FormControl(),
++++++++++hobbyList:+new+FormArray([])
++++++++})
++++++)
++++}+
++}+

++onAddHobby(group:FormGroup)+{
++++(group.get('hobbyList')+as+FormArray).push(new+FormControl())
++}

++hobbiesArray(group:FormGroup):FormArray
++{
++++return+group.get('hobbyList')+as+FormArray
++}|code-block|syntax|javascript|dlh8j|The+.html|580fm|<form+[formGroup]="myForm">
++++<ng-container+*ngFor="let+group+of+myForm.controls+%7Ckeyvalue">
++++++++<div+style="margin:20px;"+[formGroup]="group.value">
++++++++++++<label+for="">{{group.key}}</label>
++++++++++++<input+type="text"+formControlName="name">
++++++++++++<button+type="button"+(click)="onAddHobby(group.value)">Add+Hobbies</button>
++++++++++++<div+formArrayName="hobbyList">
++++++++++++++++<div+*ngFor="let+item+of+hobbiesArray(group.value).controls;+let+i+=+index">
++++++++++++++++++++<label+for="">Hobbies</label>
++++++++++++++++++++<input+[formControlName]="i">
++++++</div>
++++++++++++++++</div>
++++++++</div>
++++</ng-container>
</form>
<pre>
{{myForm?.value%7Cjson}}
</pre>|6uilr|但让我来解释一下代码。您有一个带有三个FormGroup的FormGroup，每个FormGroup都有一个FormControl和一个FormArray。我喜欢迭代总是遍历表单元素的表单，这就是为什么要遍历一些“奇怪的东西”，比如这个div下的let+group+of+myForm.controls+%7Ckeyvalue，group.value将是每个FormGroup，而group.key将是属性的名称。|style|CODE|d7946|和一个div一样，我们用这个FormGroup创建一个formGroup|4i43g|<div+style="margin:20px;"+[formGroup]="group.value">
+...
</div>|5r1b1|在这个div下，我们使用以下命令查询formControl+"name“|hvia|<input+type="text"+formControlName="name">|e0fe1|关于formArray，比如|cirmk|<div+formArrayName="hobbyList">|60j4s|我们有一个函数来获取formArray，hobbiesArray(group.value)传递FormGroup，同样在onAddHobby中我们传递FormGrorup|7ek1f^0|0|A|0|0|0|0|0|3F|12|0|0|0|0|0|0|0|K|P|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|1C|G|@]|H|@$I|1D|J|1E|A|1F]]|6|$]]|$A|K|C|L|2|M|F|1G|G|@]|H|@]|6|$N|O]]|$A|P|C|Q|2|E|F|1H|G|@]|H|@]|6|$]]|$A|R|C|S|2|M|F|1I|G|@]|H|@]|6|$N|O]]|$A|T|C|U|2|E|F|1J|G|@$I|1K|J|1L|V|W]]|H|@]|6|$]]|$A|X|C|Y|2|E|F|1M|G|@]|H|@]|6|$]]|$A|Z|C|10|2|M|F|1N|G|@]|H|@]|6|$N|O]]|$A|11|C|12|2|E|F|1O|G|@]|H|@]|6|$]]|$A|13|C|14|2|M|F|1P|G|@]|H|@]|6|$N|O]]|$A|15|C|16|2|E|F|1Q|G|@]|H|@]|6|$]]|$A|17|C|18|2|M|F|1R|G|@]|H|@]|6|$N|O]]|$A|19|C|1A|2|E|F|1S|G|@$I|1T|J|1U|V|W]]|H|@]|6|$]]|$A|1B|C|-4|2|E|F|1V|G|@]|H|@]|6|$]]]]

<p><a href="https://stackblitz.com/edit/angular-kusdyh?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">stackblitz</a>    </p>

<pre><code>  public myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({});
    for(let item of ['item1', 'item2', 'item3']) {
      this.myForm.addControl(item,
        new FormGroup({
          name: new FormControl(),
          hobbyList: new FormArray([])
        })
      )
    } 
  } 

  onAddHobby(group:FormGroup) {
    (group.get('hobbyList') as FormArray).push(new FormControl())
  }

  hobbiesArray(group:FormGroup):FormArray
  {
    return group.get('hobbyList') as FormArray
  }
</code></pre>

<p>The .html</p>

<pre><code>&lt;form [formGroup]="myForm"&gt;
    &lt;ng-container *ngFor="let group of myForm.controls |keyvalue"&gt;
        &lt;div style="margin:20px;" [formGroup]="group.value"&gt;
            &lt;label for=""&gt;{{group.key}}&lt;/label&gt;
            &lt;input type="text" formControlName="name"&gt;
            &lt;button type="button" (click)="onAddHobby(group.value)"&gt;Add Hobbies&lt;/button&gt;
            &lt;div formArrayName="hobbyList"&gt;
                &lt;div *ngFor="let item of hobbiesArray(group.value).controls; let i = index"&gt;
                    &lt;label for=""&gt;Hobbies&lt;/label&gt;
                    &lt;input [formControlName]="i"&gt;
      &lt;/div&gt;
                &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-container&gt;
&lt;/form&gt;
&lt;pre&gt;
{{myForm?.value|json}}
&lt;/pre&gt;
</code></pre>

<p>But let me explain a bit the code. You has a FormGroup with three FormGroup, each of them has a FormControl and a FormArray. I like iterate always over the form of over elements of the form, it's the reason to iterate over some "bizarro" like <code>let group of myForm.controls |keyvalue</code> under this div, group.value will be each FormGroup, and group.key will be the name of the propertie.</p>

<p>As is a FormGroup, we create a div with this [formGroup]</p>

<pre><code>&lt;div style="margin:20px;" [formGroup]="group.value"&gt;
 ...
&lt;/div&gt;
</code></pre>

<p>Under this div, we ask about the formControl "name" using </p>

<pre><code>&lt;input type="text" formControlName="name"&gt;
</code></pre>

<p>And about the formArray like</p>

<pre><code>&lt;div formArrayName="hobbyList"&gt;
</code></pre>

<p>We has a function to get the formArray, <code>hobbiesArray(group.value)</code> that pass the FormGroup, identically in onAddHobby we pass the FormGrorup</p>


<p>I will be getting list of items and their hobbylist from backend, User should able to edit/add.</p>

<pre><code>let item of ['item1', 'item2', 'item3']
</code></pre>

<p>(ngSubmit) value;</p>

<p>I want to following output: </p>

<pre><code>item1: {
hobbyList: Array[0]
name: null
}, 
item2: {
hobbyList: Array[0]
name: null
}, 
item3: {
hobbyList: Array[0]
name: null
}
</code></pre>

<p>I have tried doing this but getting below error</p>

<pre><code>ERROR
Error: Cannot find control with name: 'item1.hobbyList'
Unable to display error. Open your browser's console to view.
</code></pre>

<p>Is there any other way to achieve this.</p>

<p>Link : What i have tried so far Stackblitz: <a href="https://stackblitz.com/edit/angular-qsq3yb?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-qsq3yb?file=src%2Fapp%2Fapp.component.ts</a></p>


Reactive Form nested FormArray with dynamic Field

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我将从后端获得项目列表和他们的爱好列表，用户应该能够编辑/添加。 let item of ['item1', 'item2', 'item3'] (ngSubmit)值； 我想要以下输出： item1: {hobbyList: Array[0]name: null}, item2: {hobbyList: Array...

问具有动态字段的反应式表单嵌套FormArray
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有动态字段的反应式表单嵌套FormArrayEN