1

I am trying to initialize a form in a mat-dialog with data from an interface in my datasource, however the data is not showing up in the form fields. The data is correctly passing through as it is showing up in the html of the dialog, just not the fields of the form. Am I missing something?

edit-customer-dialog.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog/';                                                                                                                                                                                                                                                                                                                                                                                                                                                  
import {MatTableDataSource} from '@angular/material/table';
import { CustomerListItem } from '../customer.datasource';

@Component({
selector: 'app-edit-customer-dialog',
templateUrl: './edit-customer-dialog.component.html',
styleUrls: ['./edit-customer-dialog.component.css']
})
export class EditCustomerDialogComponent implements OnInit {
form: FormGroup;
customer: CustomerListItem[];

constructor(
@Inject (MAT_DIALOG_DATA) public data: any,
private dialogRef: MatDialogRef<EditCustomerDialogComponent>,
private formBuilder: FormBuilder
) {}

ngOnInit() {
// Intitlaize the form
this.form = this.formBuilder.group({
  name: [this.data.name, [Validators]],
  address: [this.data.address,[Validators]], 
})
}

edit-customer-dialog.component.html

<h2 mat-dialog-title>
Edit Customer
</h2>
<p>{{data.name}}</p>
<form *ngIf="form" [formGroup]="form" (ngSubmit)="onSubmitForm()">
  <mat-dialog-content>
  <mat-form-field>
      <input matInput placeholder="Name" formControlname ="name" required/>
  </mat-form-field>
  <mat-form-field>
        <input matInput placeholder="Address" formControlname ="address" required/>
    </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
  <button
    id="add"
    mat-button
    mat-raised-button
    color="primary"
    type="submit"
  >
    Update
  </button>
  <button id="cancel" mat-button mat-raised-button color="warn" mat-dialog-close>Cancel</button>
</mat-dialog-actions>

data pulling in from datasource

export interface CustomerListItem {
name: string;
address: string;
}


const EXAMPLE_DATA: CustomerListItem[] = [
{ name: 'Michael Jordan', address: '1111 Grail St. Concord MI 98076' },
{ name: 'Jeremy Scott', address: '7690 Wing Drive. Adidas, MI' },
{ name: 'Hiroki Nakamura', address: '980 Air Force Rd. Jubilee, MI' },
{ name: 'James Bond', address: '654 Depop Dr. Chicago, MI' },
{ name: 'Bill Bowerman', address: '1811 Hill St. Converse, MI' },
{ name: 'Clyde Frazier', address: '3333 Cement Ln. Jordan, MI'},
{ name: 'Jeff Staple', address: '4444 Black Cat Ct. Jordan,MI' },
{ name: 'Sophia Chang', address: '2006 Citrus Rd. Seven, MI'},
];

I'm not sure on why data isn't displaying in the form. When I do a console.log on the form after it is initialized it shows up as [object, Object].

Please let me know any suggestions, thank you!

Nomee
  • 21
  • 3

0 Answers0