Angular 6 动态复杂模型驱动的反应形式

Question

我正在尝试使用 Angular 的反应式表单创建一个根据特定模型动态构建的表单。模型是一个可以改变的复杂对象，并且包含嵌套的对象和值，例如（以 TypeScript 表示法）：

model.d.ts

interface Model {
    // ... other stuff
    config: { // complex object which can change, here's an example for some structure
        database: {
            uri: string;
            name: string;
        };
        server: {
            endpoint: {
                host: string;
                port: number;
            };
            requestTimeoutMs: number;
        };
    };
}

使用这个对象，我像这样构建了一个FormGroup：

form.component.ts

@Component({
    // ...
    templateUrl: './form.component.html'
})
export class FormComponent {
    @Input() model: Model;
    public form: FormGroup;

    // instantiating the whole form
    public ngOnInit(): void {
        this.form = new FormGroup({
            // ... instantiating other controls using the model,
            config: new FormGroup({}),
        });
        // building the config form using model.config which is dynamic
        this.buildForm(this.form.get('config') as FormGroup, this.model.config);
    }

    // helper functions used in the template
    public isGroup(control: AbstractControl): control is FormGroup {
        return control instanceof FormGroup;
    }
    public typeOf(value: any): string {
        return typeof value;
    }

    // building the config form
    private buildForm(group: FormGroup, model: object): void {
        for (const key in obj) {
            const prop = obj[key];
            let control: AbstractControl;
            if (prop instanceof Object) { // nested group
                control = new FormGroup({});
                this.buildForm(control as FormGroup, prop);
            } else { // value
                control = new FormControl(prop);
            }
            group.addControl(control);
        }
    }
}

此代码按预期工作并根据对象创建表单。我知道这不会检查数组和FormArrays，因为我目前不使用它们。

构建表单后，我试图在我的模板中显示整个表单，这是我遇到问题的地方。这是我的模板：

form.component.html

<form [ngForm]="form" (ngSubmit)="...">
    <!-- ... other parts of the form -->
    <ng-container [ngTemplateOutlet]="formItemTemplate"
                  [ngTemplateOutletContext]="{parent: form, name: 'config': model: model; level: 0}">
    </ng-container>
    <ng-template #formItemTemplate let-parent="parent" let-name="name" let-model="model" let-level="level">
        <ng-container [ngTemplateOutlet]="isGroup(parent.get(name)) ? groupTemplate : controlTemplate"
                      [ngTemplateOutletContext]="{parent: parent, name: name, model: model, level: level}">
        </ng-container>
    </ng-template>
    <ng-template #groupTemplate let-parent="parent" let-name="name" let-model="model" let-level="level">
        <ul [formGroup]="parent.get(name)">
            <li>{{name | configName}}</li>
            <ng-container *ngFor="let controlName of parent.get(name) | keys">
                <ng-container [ngTemplateOutlet]="formItemTemplate"
                              [ngTemplateOutletContext]="{name: controlName, model: model[name], level: level + 1}">
                </ng-container>
            </ng-container>
        </ul>
    </ng-template>
    <ng-template #controlTemplate let-name="name" let-model="model" let-level="level">
        <li class="row">
            <div class="strong">{{name | configName}}</div>
            <ng-container [ngSwitch]="typeOf(obj[name])">
                <input type="text" *ngSwitchCase="'string'" [formControlName]="name">
                <input type="number" *ngSwitchCase="'number'" [formControlName]="name">
                <input type="checkbox" *ngSwitchCase="'boolean'" [formControlName]="name">
            </ng-container>
        </li>
    </ng-template>
</form>

让我为你分解一下，以防组件的模板不被理解：

我有formItemTemplate，它的工作是区分parent.get(name)（子控件）是FormGroup 还是FormControl。如果子控件是FormGroup，则创建groupTemplate的子模板，否则创建controlTemplate。

在groupTemplate 中，我创建了一个ul 节点，它将[formGroup] 绑定到parent.get(name)（子组）并在其中（分层）然后继续创建formItemTemplate 模板对于该子组的每个控件，我使用我创建的 keys 管道获得了其控件名称，该管道仅返回给定值的 Object.keys()。基本上 - 递归。

在controlTemplate 中，我只是创建了一个新的li，并在其中创建了一个将[formControlName] 绑定到[ngTemplateOutletContext] 中给出的name 的输入。

问题是我收到以下错误：

找不到名称为“...”的控件

我知道如果您将[formControlName] 绑定到一个名称不在绑定到您的FormGroup 的[formGroup] 范围内的控件上，就会发生这种情况。这很奇怪，因为我什至检查了 DevTools 并且可以看到 ng-reflect-form="[object Object]" 属性应用于该组的 ul，这意味着它确实被绑定并且很可能是正确的 FormGroup。

在使用从模板上下文传递的附加参数调试isGroup() 时（例如model 和name），我注意到isGroup() 会为每个对象按顺序调用多次，而不是每个对象调用一次对象，像这样：

1. 配置
2. 数据库
3. uri
4. 配置 - 再次？为什么？为什么不叫name？
5. 数据库
6. uri
7. 姓名
8. 配置 - 第三次？？？
9. 数据库
10. uri
11. 姓名
12. 服务器 - 应该在第 5 次迭代中调用

然后它在没有完成整个模型的迭代的情况下崩溃，除非我单击组件中的某些输入，这太奇怪了。

我见过this question，它与我的相似，但对解决问题没有帮助。提前致谢！

Answer 1

通过将[formGroup]="parent" 添加到controlTemplate 中的li 元素解决了我自己的问题。哎呀！