0

我正在尝试使用来自数据源中接口的数据在 mat-dialog 中初始化表单，但是数据未显示在表单字段中。数据正确通过，因为它显示在对话框的 html 中，而不是表单的字段。我错过了什么吗？

编辑-客户-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]], 
})
}

编辑-客户-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>

从数据源拉入的数据

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'},
];

我不确定为什么表格中没有显示数据。当我在初始化后在表单上执行 console.log 时，它显示为 [object, Object]。

有什么建议请告诉我，谢谢！

4

0 回答 0