Элемент управления поля формы Angular Material равен нулю - PullRequest
Новая
       7

Элемент управления поля формы Angular Material равен нулю

0 голосов
/ 06 ноября 2018

Я пытаюсь реализовать MaterialDialog, используя этот пример и по какой-то причине я получаю: 

Cannot read property 'data' of null at new ACDialogComponent

Мой компонент 

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

Мой 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>

внешний компонент (тот, который открывает диалог) 

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

Ответы [ 3 ]

0 голосов
/ 06 ноября 2018

Ошибка Cannot read property 'data' of null at new ACDialogComponent. Это потому, что внутри тела constructor написано опечатка. Переменная data никогда не имеет

Посмотри на @Inject(MAT_DIALOG_DATA) d

this.datatype = data.datatype;

изменение 

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

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

}

до 

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

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

}
0 голосов
/ 07 ноября 2018

Вы не устанавливаете свойство data для dialogConfig, поэтому d не определено в конструкторе компонента диалога.

Похоже, это должен быть объект, обладающий свойством data и datatype, что-то вроде этого: 

...
dialogConfig.data = { data: 'foo', datatype: 'bar' };
...
0 голосов
/ 06 ноября 2018

Вы, похоже, не создаете свои элементы управления для своей формы, вам нужно будет сделать что-то вроде ниже, чтобы создать элементы управления data и 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 минус mat-dialog, если применение этого к вашему проекту не решает проблему, то может возникнуть проблема с входящими данными, которые DI'd в диалог также через переменную данных.

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

Редакция Вы также, похоже, не передаете свои данные в диалоговое окно, попробуйте следующее. 

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