Issue
I was building a form component that is created by a button click on my page, which creates inside a dynamic dialog.
After the form is submitted, the form is updated to the server, but the page immediately reloads after adding a '?' at the end of the URL and I would like to stop it from happening.
I have tried removing the onClose
subscription of the parent component and the same result happens, and the onClose related code is executed before reloading. Since the subscription is executed before reloading, I have no control of the settings of the component anymore.
The angular stack
primeng
: ^13.1.0@angular/...
: ~13.1.0 except@angular/cdk
: ^13.2.1
parent.component.html
<button
type="button"
pButton
icon="pi pi-plus"
class="p-button-success mx-1"
label="New"
(click)="onAddNewEntry()"
></button>
parent.component.ts
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ChildComponent } from './child-component';
@Component({
...
providers: [DialogService]
})
export class ParentComponent implements OnInit, OnDestroy {
constructor(
private dialogService: DialogService
) {}
ref: DynamicDialogRef = new DynamicDialogRef();
ngOnInit(): void {
}
onAddNewEntry(): void {
this.ref = this.dialogService.open(ChildComponent, {});
this.ref.onClose.subscript(() => console.log('Hi'))
}
ngOnDestroy(): void {
if (this.ref) {
this.ref.close();
}
}
}
child.component.ts
import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
@Component({
...
})
export class ChildComponent implements OnInit {
constructor(
private messageService: MessageService,
private ref: DynamicDialogRef,
private config: DynamicDialogConfig
) {}
newEntryForm: FormGroup = new FormGroup({});
ngOnInit(): void {
this.newDeliverForm = new FormGroup({
...
});
}
onSubmitNew() {
//Handling
this.ref.close(newDeliver);
}
}
app-routing.module.ts
const routes: Routes = [
{
path: 'config',
children: [
{ path: 'parent', component: ParentComponent },
],
},
];
Solution
It was due to the default type of the button on the child component was submit
, thus it submitted the child component form and make a query. After adding type="button"
to the child component form, the issue is solved.
<form [formGroup]="newDeliverForm">
<!-- The form inputs -->
<button
*ngIf="!isEditMode"
pButton
type="button"
label="Add"
(click)="onSubmitNew()"
icon="pi pi-plus"
[disabled]="newDeliverForm.invalid"
></button>
</form>
Answered By - 3LexW
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.