While attempting to submit a form from a dialog, I encountered an issue where form.value is showing as null. I'm not sure what might be causing this. Below is a snippet of the code along with a DEMO for reference.
HTML
<div>
<button mat-raised-button (click)="openDialog()">Pick one</button>
</div>
<ng-template #callAPIDialog>
<form #userForm="ngForm" (ngSubmit)="onSend(form.value)">
<h2 matDialogTitle>Add Organization</h2>
<mat-form-field>
<input matInput [(ngModel)]="organisationName" placeholder="Your organization" [ngModelOptions]="{standalone: true}">
<input matInput [(ngModel)]="enabled" [(value)]="Y" [ngModelOptions]="{standalone: true}">
</mat-form-field>
<mat-dialog-actions align="end">
<button mat-button matDialogClose="no">Cancel</button>
<button type="submit" mat-button matDialogClose="yes">Submit</button>
</mat-dialog-actions>
</form>
</ng-template>
Component
openDialog() {
let dialogRef = this.dialog.open(this.callAPIDialog);
dialogRef.afterClosed().subscribe(result => {
if (result !== undefined) {
if (result !== 'no') {
const enabled = "Y"
console.log(result);
} else if (result === 'no') {
console.log('User clicked no.');
}
}
})
}
onSend(form: NgForm){
let data = form.value;
console.log(data);
}