Angular Material form field control is null

Question

I'm trying to implement a MaterialDialog using this example and for some reason I get:

Cannot read property 'data' of null at new ACDialogComponent

My Component

import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";
import { Component, OnInit, Inject } from "@angular/core";
import { FormGroup, FormBuilder } from "@angular/forms";

@Component({
    selector: 'acdialog',
    templateUrl: './acdialog.component.html',
    styleUrls: ['./acdialog.component.css']
})
export class ACDialogComponent implements OnInit {

    form: FormGroup;
    data: string="";
    datatype:string;

    constructor(
        private fb: FormBuilder,
        private dialogRef: MatDialogRef<ACDialogComponent>,
        @Inject(MAT_DIALOG_DATA) d) {

        this.data = d.data;
        this.datatype = data.datatype;

    }

    ngOnInit() {

        this.form = this.fb.group({
            description: ["descriptionhere", []],
        });

    }

    save() {
        this.dialogRef.close(this.form.value);
    }

    close() {
        this.dialogRef.close();
    }
}

My HTML

<h2 mat-dialog-title>Add new contact</h2>

<mat-dialog-content [formGroup]="form">

    <mat-form-field>
        <input matInput placeholder="Data:" formControlName="data">
    </mat-form-field>
    <h4>data type</h4>

    <mat-form-field>
        <select matNativeControl required formControlName="datatype">
            <option value="email">email</option>
            <option value="phone">phone</option>
        </select>
    </mat-form-field>

</mat-dialog-content>

<mat-dialog-actions>
    <button class="mat-raised-button" (click)="close()">Close</button>
    <button class="mat-raised-button mat-primary" (click)="save()">Save</button>
</mat-dialog-actions>

the outer component (the one that opens the dialog)

constructor(private dialog: MatDialog) { }

openDialog() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    this.dialog.open(ACDialogComponent, dialogConfig);

    const dialogRef = this.dialog.open(ACDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(
        data => console.log("Dialog output:", data)
    );
}

Do you actually pass something as data-property of the config object when opening the dialog with the open function? — sloth
– sloth, Commented Nov 6, 2018 at 16:18
MAT_DIALOG_DATA is not being injected. Do you need this in your component ? — Sunil
– Sunil, Commented Nov 6, 2018 at 16:33
@sloth I didnt think I needed to since my form was hardcoded. Im only trying to read user input — Rilcon42
– Rilcon42, Commented Nov 6, 2018 at 16:41
@SunilSingh What do you mean MAT_DIALOG_DATA is not being injected? — Rilcon42
– Rilcon42, Commented Nov 6, 2018 at 16:42

sloth · Accepted Answer · 2018-11-07 10:50:41Z

1

You don't set the data property of dialogConfig, hence d is undefined in the constructor of your dialog component.

It seems like it should be an object that has a data and a datatype property, something like this:

...
dialogConfig.data = { data: 'foo', datatype: 'bar' };
...

answered Nov 7, 2018 at 10:50

sloth

101k21 gold badges182 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NoLogig · Accepted Answer · 2018-11-06 23:06:01Z

0

The error Cannot read property 'data' of null at new ACDialogComponent. Is because a misspelling inside constructor body. The variable data has never

Look at @Inject(MAT_DIALOG_DATA) d

this.datatype = data.datatype;

change

constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<ACDialogComponent>,
    @Inject(MAT_DIALOG_DATA) d) {

    this.data = d.data;
    this.datatype = data.datatype;

}

to

constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<ACDialogComponent>,
    @Inject(MAT_DIALOG_DATA) d) {

    this.data = d.data;
    this.datatype = d.datatype;

}

edited Nov 6, 2018 at 23:06

answered Nov 6, 2018 at 16:46

NoLogig

1167 bronze badges

Comments

Marshal · Accepted Answer · 2018-11-07 14:00:53Z

0

You don't appear to be creating your controls for your form, you will need to do something like below to create the controls data and datatype

   import { FormGroup, FormBuilder, FormControl } from "@angular/forms"; 

   ngOnInit() {

        this.form = this.fb.group({
            description: ["descriptionhere", []],
            data: new FormControl(this.data),
            datatype: new FormControl(this.datatype)
        });

    }

stackblitz example minus mat-dialog, if applying this to your project does not resolve the issue then there may infact be a problem with the incoming data DI'd into the dialog via data variable as well.

https://stackblitz.com/edit/angular-nuy1jy?embed=1&file=app/select-overview-example.ts

Revision You also don't appear to be passing your data into the dialog, please try the following.

 const dialogRef = this.dialog.open(ACDialogComponent, {
   disableClose: true,
   autoFocus: true,
   data: passYourDataHere 
});

edited Nov 7, 2018 at 14:00

answered Nov 6, 2018 at 16:22

Marshal

11.2k3 gold badges40 silver badges58 bronze badges

4 Comments

Rilcon42 Over a year ago

Thanks, I added this to my code, but am still having the same issue

Marshal Over a year ago

I had some typo's in my original response, case issues. Do you have latest copy datatype or dataType?

Marshal Over a year ago

stackBlitz example for formControl minus the dialog, link attached to answer.

Marshal Over a year ago

Please see revision

Collectives™ on Stack Overflow

Angular Material form field control is null

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related