I'm following the Developing Step by Step guide of Asp Net Zero and I have a question from the section "Creating a New Person > Creating a Modal" (link: https://docs.aspnetzero.com/documents/zero/latest/Developing-Step-By-Step-Angular)
Specifically I'm trying to understand the following sentence:
"The code is simple and easy to understand except a small hack: an active flag is used to reset validation for Angular view (explained in angular's documentation)."
The code it refers to is from the "create-person-modal.component.ts"
It seems the variable 'active' declared in the component CreatePersonModalComponent is used somehow in the validation process. As much as I'm looking to the code, the only thing I see is that variable 'active' is only used in the '<form *ngIf="active" ' part of the form. So, as I understands, it shows/hide the form depending on the value of that variable. At the same time, in that component file, that variable changes its values from true to false depending on whether the form is open or closed:
active: boolean = false;
show(): void {
this.active = true;
[...]
}
close(): void {
this.active = false;
[...]
}
Could you please give me some hints, guidance or help on knowing how this active variable is linked to the validation (and specifically to resetting the validation) of the form?
I attach an screenshot with the lines of the code in the tutorial that I'm trying to understand.
2 Answer(s)
-
0
Hi @juan.huerta
I couldn't find related information on the Angular documentation but as far as I remember it works like this;
If you don't use ngIf like this, when you open a modal and fill the inputs in the form and close it, Angular keep their values inside of the form. When you re-open the modal, all fields will have their latest values you have entered at the previous time.
by using, *ngIf="active", when you clsoe the modal, form element will be removed from the DOM. When you re-open the modal, form element will be added to DOM agian with empty input elements.
I guess it is all about this.
We are using ngx-bootstrap and it forces us to use inline modal components, not dynamic ones. Because of that, we are using such an approach.
If there were dynamic modal loading option, this wouldn't be necessary.
-
0
Great, thanks for the explanation!
