I need to create a reusable form dialog to visualize different forms. I am using Angular 17 and Angular Material. In my component I am trying to define a form like that:
<form #myForm="ngForm" (ngSubmit)="submitForm(myForm)">
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date" name="date" ngModel required>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="myForm.controls.date.invalid && myForm.controls.date.touched">Please choose a date.</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="First Name" name="firstName" ngModel required>
<mat-error *ngIf="myForm.controls.firstName.invalid && myForm.controls.firstName.touched">Please enter a first name.</mat-error>
</mat-form-field>
<button mat-raised-button color="primary" type="submit" [disabled]="myForm.invalid">Submit</button>
</form>
In my .ts file I have a method to open a dialog:
@ViewChild('myForm', { static: true }) public myForm: ElementRef;
public openDialog(): void {
const dialogRef = this.dialog.open(FilterFormDialogComponent, {
width: '460px',
disableClose: true,
autoFocus: false,
panelClass: 'form-dialog',
data: {
form: this.myForm // reference to the form previously defined
},
});
}
In my filterFormDialogComponent I am trying to visualize the inserted form in its html by using ng-content. However, I am unable to visualize the form.
Is it possible to pass a form or another component into a dialog by using MAT_DIALOG_DATA? If so, how to display it properly into the html of the dialog?