statusChanges not called when switch TAB

Question

I have a parent component which has two TABs. Each TAB hold one child component. Every child component has a form.

On the parent component there is a button. What I want is once two reactive forms are valid then enable the button. The parent component likes

 <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>

I parent's ts file. We have the methods.

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

In child1 component.

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

Similar in child2 component,

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

Let's say child1 form and child2 form have some textbox, which are required.(Omitted code here since it just Validators.required.

Now I typed some text in the controls and set breakpoint in the statusChanges event. Now the question is child2 statusChanges method is not called. But child1 is okay, the validation does work. I guess that is the TAB issue when I switch it, it may reload???

UPDATED:

Not sure why it works in stackblitz but failed in my application.

Both, I type in child1, the statusChanges was called. Then I switch to child 2, the corresponding statusCahnges was not called. — Hello

Hello Hello · Accepted Answer · 2019-09-26T23:40:35

It turns out a lower level error, I didn't put the formcontrol's name in the element. I should be careful to check it.

Such as

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

`

statusChanges not called when switch TAB

1 Answers