交换机TAB时未调用statusChanges

Question

我有一个父组件，它有两个选项卡。每个TAB包含一个子组件。每个子组件都有一个窗体。

在父组件上有一个按钮。我想要的是，一旦两个反应形式是有效的，然后启用按钮。父组件喜欢

 <Button (click)="Submit()" [disabled]="!isChild1FormValid || !isChild2FormValid">Submit</Button>
 <kendo-tabstrip (tabSelect)="onTabSelect($event)">
    <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
      <ng-template kendoTabContent>
        <app-child1 (isChild1FormValid)="trigger1($event)">
        </app-child1>
      </ng-template>
    </kendo-tabstrip-tab>
    <kendo-tabstrip-tab [title]="'New York City'">
      <ng-template kendoTabContent>
         <app-child2 (isChild2FormValid)="trigger2($event)">
        </app-child2>
      </ng-template>
    </kendo-tabstrip-tab>
 </kendo-tabstrip>  

我父母的ts文件。我们有办法。

trigger1(isValid: boolean) {
   isChild1FormValid = isValid;
}
 trigger2(isValid: boolean) {
   isChild2FormValid = isValid;
}

在child1组件中。

@Output() isChild1FormValid: EventEmitter<boolean> = new EventEmitter<boolean>();
In its `ngOnInit()`, we have 
     childForm1.statusChanges.subscribe(res => {
      if(res == 'VALID') {
          this.isChild1FormValid.emit(true);
       }
       });
   }

类似于child2组件，

@Output() isChild2FormValid: EventEmitter<boolean> = new EventEmitter<boolean>();
In its `ngOnInit()`, we have 
    childForm2.statusChanges.subscribe(res => {
      if(res == 'VALID') {
          this.isChild2FormValid.emit(true);
       }
       });
    }

假设child1表单和child2表单有一些文本框，这是必需的。(这里省略了代码，因为它只是Validators.required。

现在，我在控件中键入了一些文本，并在statusChanges事件中设置了断点。现在的问题是没有调用child2 statusChanges方法。但是child1是可以的，验证是有效的。我想这是TAB的问题，当我切换它，它可能会重新装载？

更新：

不知道为什么它在stackblitz中工作，但在我的应用程序中失败。

Answer 1

结果是一个较低级别的错误，我没有将表单控件的名称放在元素中。我应该仔细检查一下。

比如

<label>
First Name:
<input type="text" formControlName="firstName">

`