- 首页
- 其他开发
- 使用角度 6 中的反应形式的递归形式(树视图)
使用角度 6 中的反应形式的递归形式(树视图)
[英] Recursive form (tree view) using Reactive forms in angular 6
本文介绍了使用角度 6 中的反应形式的递归形式(树视图)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从下面理解了递归元素(树视图)的概念.
链接 1
就我而言，我想将它与表单一起使用；让我们说递归简单的文本输入.表单的 JSON 结构如下.
JOSN 结构
我已准备好以下代码.执行以下代码时出现超出最大调用堆栈大小错误.
下面是我的 component.html 文件.
<!-- {{item.get('element')?.controls?.length}} --><div *ngIf="item.get('element')?.controls?.length > 0"><ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.get('element').controls }"></ng-container>
</ng-模板><ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: testForm.get('element').controls }"></ng-container>
这里是 component.ts 文件.
import { Component, OnInit } from '@angular/core';从@angular/forms"导入 {FormControl、FormGroup、Validators、FormBuilder、FormArray}；@成分({选择器:应用测试"，templateUrl: './test.component.html',样式网址:['./test.component.scss']})导出类 TestComponent 实现 OnInit{testForm:FormGroup;元素:任意；构造函数(私有表单构建器:FormBuilder){}ngOnInit() {this.testForm=this.formBuilder.group({元素:this.formBuilder.array([this.formBuilder.group({类型:''，元素:this.formBuilder.array([this.formBuilder.group({类型:''，元素:this.formBuilder.array([])})])})])})}提交(){console.log(this.testForm.value);}}
解决方案
其实 Bhavik Patel 的回答会解决报错的问题:
<块引用>
超出最大调用堆栈大小
但是由于 Angular 响应式表单的工作方式，您的表单绑定将无法正常工作.它依赖于依赖注入树，对于这个模板，它看起来像:
FormGroup(testForm)|__ FormArrayName('元素')|___ FormGroupName('0')|....|___ 表单组名(n)
您将始终只在顶级控件上获得更新.
要解决此问题，您可以定义一些前缀，这些前缀将在嵌入式视图中更新.然后使用该前缀在树的每个级别上定义 formGroup:
<div class="sub-tree" *ngIf="item.get('element')?.controls?.length"><ng-容器*ngTemplateOutlet="recursiveList; context:{ $implicit: item.get('element').controls, prefix: prefix + i + '.element.'}"></ng-container>
</ng-容器></ng-模板><ng-容器*ngTemplateOutlet="recursiveList; context:{ $implicit: testForm.get('element').controls, prefix: 'element.'}"></ng-container></表单>
Ng-run 示例
I have understand concept of recursive elements(tree view) from below.
Link 1
In my case, I want to use it with forms; let's say simple text input recursively. JSON structure of form is as below.
JOSN Structure
I have prepared below code.I am getting Maximum call stack size exceeded error by executing below code.
Below is my component.html file.
<form [formGroup]="testForm" (ngSubmit)="onSubmit()">
<div formArrayName="element">
<ng-template #recursiveList let-list>
<div *ngFor="let item of testForm.get('element').controls;let i=index;">
<div [formGroupName]="i">
<input type="text" formControlName="type">
</div>
<!-- {{item.get('element')?.controls?.length}} -->
<div *ngIf="item.get('element')?.controls?.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.get('element').controls }"></ng-container>
</div>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: testForm.get('element').controls }"></ng-container>
</div>
And here is component.ts file.
import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators, FormBuilder, FormArray} from '@angular/forms';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: [
'./test.component.scss'
]
})
export class TestComponent implements OnInit{
testForm:FormGroup;
element:any;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.testForm=this.formBuilder.group({
element:this.formBuilder.array([
this.formBuilder.group({
type:'',
element:this.formBuilder.array([
this.formBuilder.group({
type:'',
element:this.formBuilder.array([
])
})
])
})
])
})
}
onSubmit() {
console.log(this.testForm.value);
}
}
解决方案
In fact, Bhavik Patel's answer will solve the problem with the error:
Maximum call stack size exceeded
But your form bindings won't work properly due to how Angular reactive forms work.
It relies on Dependency Injection tree which for this template looks like:
FormGroup(testForm)
|__ FormArrayName('element')
|___ FormGroupName('0')
| ....
|___ FormGroupName(n)
You will always get updates only on your top level controls.
To fix this issue you can define some prefix which will be updated inside embedded view. And then use that prefix to define formGroup on each level of your tree:
<form class="tree" [formGroup]="testForm" (ngSubmit)="onSubmit()">
<ng-template #recursiveList let-controls let-prefix="prefix">
<ng-container *ngFor="let item of controls; let i = index">
<div class="tree-item" [formGroup]="testForm.get(prefix + i)">
<input type="text" formControlName="type">
</div>
<div class="sub-tree" *ngIf="item.get('element')?.controls?.length">
<ng-container
*ngTemplateOutlet="recursiveList; context:{ $implicit: item.get('element').controls, prefix: prefix + i + '.element.' }"></ng-container>
</div>
</ng-container>
</ng-template>
<ng-container
*ngTemplateOutlet="recursiveList; context:{ $implicit: testForm.get('element').controls, prefix: 'element.' }"></ng-container>
</form>
Ng-run Example
这篇关于使用角度 6 中的反应形式的递归形式(树视图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
