CODEWITHSUNDEEP
angularangular-materialmaterial-design
Rilcon42
Rilcon42

Reputation: 9765

Angular Material form field control is null

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)
    );
}

Upvotes: 0

Views: 1907

Answers (3)

Marshal
Marshal

Reputation: 11081

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 
});

Upvotes: 0

sloth
sloth

Reputation: 101042

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' };
...

Upvotes: 1

NoLogig
NoLogig

Reputation: 116

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;

}

Upvotes: 0

Related Questions