Within my project, I have a sidenav that contains various links. One of these links directs to a component that presents some input data.
Below is the TypeScript code:
@Input() data: MyData;
myModal: BsModalRef;
editForm: FormGroup;
ngOnInit(){
this.editForm = this.formBuilder.group({
inOne: [this.data.one, [Validators.required]],
inTwo: [this.data.two, [Validators.required]]
});
}
showModal() {
const config: ModalOptions = {
initialState: {
message: 'Some dynamic tip message'
}
};
this.myModal = this.modalService.show(MyModalComponent, config);
}
The HTML code associated with it is as follows:
<form [formGroup]="editForm" (ngSubmit)="editForm.valid && save()">
<h3>SIMPLE MODE</h3>
<app-text-input
[formControl]="editForm.controls['inOne']" [type]="'number'">
</app-text-input>
<app-text-input
[formControl]="editForm.controls['inTwo']" [type]="'number'">
</app-text-input>
<button class="btn btn-info btn-sm" (click)="showModal()">Tip</button>
</form>
For the "app-text-input" component, the corresponding code snippet is provided below:
<div class="form-group">
<input
[class.is-invalid]='ngControl.touched && ngControl.invalid'
type={{type}}
class="form-control"
[formControl]="ngControl.control"
placeholder={{label}}"
>
<!-- some validators -->
</div>
Although this code functions properly initially with preloaded data displaying correctly, issues arise after interacting with the modal pop-up. Upon closing the modal, the previously loaded data remains in the inputs. However, upon returning from another page within the sidenav, the pre-loaded data disappears. An error related to expression changing is displayed in the console:
core.mjs:6485 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'ng-valid': 'true'. Current value: 'false'.. Find more at https://angular.io/errors/NG0100
at throwErrorIfNoChangesMode (core.mjs:6733:1)
at bindingUpdated (core.mjs:12710:1)
at checkStylingProperty (core.mjs:16451:1)
at ɵɵclassProp (core.mjs:16359:1)
at NgControlStatus_HostBindings (forms.mjs:1367:1)
at processHostBindingOpCodes (core.mjs:9251:1)
at refreshView (core.mjs:9530:1)
at refreshComponent (core.mjs:10655:1)
at refreshChildComponents (core.mjs:9280:1)
at refreshView (core.mjs:9534:1)
An attempted solution involved implementing the following:
ngAfterViewChecked(): void {
this.changeDetectorRef.detectChanges();
}
While this resolved the error issue, the problem of missing preloaded data persisted. What could be causing this?