如何以角度形式实现我想通过子组件动态呈现表单控件的功能？答案

【问题标题】：How to achieve the functionality in angular form where I want to render form-controls dynamically via sub-component?如何以角度形式实现我想通过子组件动态呈现表单控件的功能？
【发布时间】：2019-12-30 20:40:05
【问题描述】：

我创建了一个 Angular 响应式表单，其中标签将通过权限切换。我想通过创建一个组件来处理这些语义切换，该组件负责将数据作为@Input() 并呈现特定的输入标签。处理这个问题的正确方法是什么？

有一个父master-form.component，其中包含'formGroup'和一个名为input-switch.component的子组件。我通过@Input() 将特定参数传递给子组件。子组件由字段值和 formControlName 组成，用 ngIf 切换。

这里是 master-form.component html -

<form class="master-form" [formGroup]="masterForm" (ngSubmit)="submitData(masterForm)">
    <label>My first field: </label>
    <input-switch [setting]="'change'" [labelVal]="'first field value'" [formCtrl]="'firstField'">
    </input-switch>
    <label>My second field: </label>
    <input-switch [setting]="'change'" [labelVal]="'second field value'" 
[formCtrl]="'secondField'">
    </input-switch>
    <button type="submit" [disabled]="!masterForm.valid"></button>
</form>

主窗体组件类-

class MasterFormComponent implements OnInit {
    masterForm: FormGroup;

    constructor(private fb: FormBuilder){}

    ngOnInit() {
        this.masterForm = this.fb.group({
          firstField: ['', Validators.maxLength(10)],
          secondField: ['', Validators.maxLength(20)]
        });
    }

    submitData(form) {
        console.log('DONE!');
    }
}

输入开关子组件类-

class InputSwitch {
    @Input() setting ;
    @Input() labelVal;
    @Input() formCtrl;
}

输入切换子组件html -

<span *ngIf="setting !== 'change'">{{labelVal}}</span>
<input *ngIf="setting === 'change'" [formControlName]="formCtrl" />

在 input-switch.component 中提到缺少“formGroup”时出现错误，我无法设置表单。这里似乎有什么问题？有没有其他方法可以实现这个功能？

【问题讨论】：

标签： javascript angular typescript angular-reactive-forms reactive-forms

【解决方案1】：

您可以浏览此博客。它提到了如何使用 ControlValueAccessor 接口处理表单中的子组件。

Nested Reactive Forms Using ControlValueAccessors

这很复杂，但你可以试试。

您还可以创建两个单独的组件，每个组件都有不同的表单元素，并使用 *ngIf 切换它们。在组件/指令中打破它需要在每个表单字段中插入。模型绑定需要正确处理，记住 ngModel 存在于父控制器中。如果处理不当，可能会增加代码复杂性。

根据您的要求选择一种方式进行。

【讨论】：