Question

我有一个关于使用formgroup进行表单验证的问题。我表单的一部分是动态的（调用其他组件）。

这是我的表格：

            <form [formGroup]="deliveryService.deliveryForm" >
            <!--Common input field-->
            <div #name class="QTZ_form_group QTZ_valid">
                <div class="QTZ_form_dropdown">
                    <label class="QTZ_prepend_input">
                        Name
                        <span>
                            <input [(ngModel)]="deliveryService.deliveryModel.name" type="text" name="name">
                        </span>
                    </label>
                </div>
            </div>

            <!--Dynamic part from other component-->
            <ng-container *ngComponentOutlet="currentComponent"></ng-container>


            <div class="QTZ_form_controls">
                <button class="QTZ_primary_bg" (click)="onSubmit()" [disabled]="!deliveryService.deliveryForm.valid">Validate</button>
            </div>
        </form>

在这种形式下，我有一个带有ngComponentOutlet的动态零件（注入了其他零件）。这些组件是表单的一部分，但并非一直都在调用

将formGroup与其他组件一起使用的最佳选择是什么。

感谢您的帮助

Answer 1

我不会使您的子组件动态化，而是以没有ng-container的形式实例化它，并简单地将其父表单数据作为绑定传递给它。如果您使用的是反应式表单，它将自动从子组件中获取任何表单数据，并使用其填充父表单架构。然后可以通过反应形式模式提供验证。

<form (ngSubmit)="onSubmit()" [formGroup]="myForm">
    <myFormChildComponent [parent]="myForm"></myFormChildComponent>
</form>

验证具有动态零件的形式

1 个答案: