If show template with disabling a form at the same time - then a form not disabling

Working on a form with two template. It seems that if we change template + setting form as disabled, the form is not disabling. But if we do it with separate thread via setTimeout, we have corrent working form disabling.

.html

<ng-template #list>
<table class="list-table" cellspacing="0" cellpadding="0" [formGroup]="profileForm">
<tr>
<th>Named column</th>
</tr>
<tr>
<td style="vertical-align:bottom;">
<button mat-flat-button (click)="createButton()" ngDefaultControl formControlName="createButton">Create</button>
</td>
</tr>
</table>
</ng-template>
<ng-template #formList>
<p>This is formList..</p>
<table class="list-table" cellspacing="0" cellpadding="0" [formGroup]="profileFormFormed">
<tr>
<th>Named column</th>
</tr>
<tr>
<td style="vertical-align:bottom;">
<button mat-flat-button (click)="backButton()" ngDefaultControl formControlName="backButton">backButton</button>
</td>
</tr>
</table>
</ng-template>
<ng-container *ngTemplateOutlet="listOutlet ? list : (formListOutlet ? formList : null)"></ng-container>


.ts

private formBuilder = inject(FormBuilder);
profileForm: FormGroup = this.formBuilder.group({
createButton: new FormControl({ disabled: false, emitEvent: false, onlySelf: true })
});

profileFormFormed: FormGroup = this.formBuilder.group({
backButton: new FormControl({ disabled: true, emitEvent: false, onlySelf: true })
});

backButton() {
this.listOutlet = true;
this.formListOutlet = false;
setTimeout(() => {
this.profileForm.disable(); // this work fine, but why??
}, 0);
}


Expecting workable all two actions at the same time. Is it a question why need to use a thread to disabling a form.

Continue reading...