Angular 嵌套表单验证

Question

我想指出的是，我已经处理这个问题1个月了。我愿意接受任何建议。

我有接收用户输入数据的表单页面。这些页面包含一个名为 basa-crud-page 的组件。这个base-crud-page组件使用模板驱动表单，里面的代码如下所示。我不能分享整个代码的原因是因为这是我刚刚开始工作的公司的代码：

<form #editForm="ngForm" validate>

      <ng-container *ngIf="customized">
        <ng-content select="[customForm]"></ng-content>
      </ng-container>

      <ng-container *ngIf="!customized">
        .
        .
        Here are the codes of the elements of the base form
        .
        .
      </ng-container>
</form>

此页面上的“自定义”属性默认情况下具有 false 值，并且表单验证在直接使用 base-crud-page 的页面上完美运行。例如，对于 glr-vezne-pos-page 有这样的用法：

selector: 'glr-vezne-pos-page',
  template: `
    <ng-container>
      <base-crud-page #baseCrudPage />
    </ng-container>`

但是，当我编写一个将自定义属性设置为 true 的页面并且我自己指定表单元素时，表单控件永远不会工作。 作为其用法的示例：

<ng-container>
  <base-crud-page [customized]="true">
    <div customForm>
    .
    .
    Here are the codes of the form elements of the "custom" form.
    .
    .
    </div>
  </base-crud-page>
</ng-container>

注意：该组件中标记为customForm的div必须放置在base-crud-page中的

<ng-content select="[customForm]"></ng-content>

字段中。

我怀疑的是：

我可以将第一个示例中创建的页面和 ngAfterViewInitte 表单打印到控制台。

与第二个示例一样，页面被创建为自定义表单，并且该表单不会打印到控制台。正如您所看到的，“Kaydet” - 即“保存”按钮似乎处于活动状态，因为控件不起作用。

我对各种想法持开放态度，并且需要帮助。

Answer 1

一些建议：

1. 控制台出现错误，提示“无法读取属性 在meta-new-button.component.ts中未定义”。所以你有一个 您期望具有值但实际上没有值的变量。你需要检查 之前

     if (my-variable)
        other-variable=my-variable.property
   

2. 当我们有“嵌套表单”（“表单”在 在组件中，一般我们使用viewProvider。看到这一点，作为 您正在使用模板驱动表单，您使用现有：

   ngForm

   （不是 表格指令）

   @Component({
     selector: 'base-crud-page',
     templateUrl: './base-crud-page.component.html',
     viewProviders:[{ provide: ControlContainer, useExisting: NgForm }]
   })
   

3. 首先尝试使用只有一个按钮和一个输入的简单组件 检查问题不在于您如何定义输入