对话框 angular 表单错误
[英]dialog angular form errors
问题描述
我在一个对话框中创建了一个反应式表单，该表单在表格中显示表单的数据（来自 angular 材料），几乎一切正常，问题是我单击打开对话框我有错误消息，尽管我不明白研究。
1.this.data 为 null。
this.form._updateTreeValidity 不是 function 此错误来自 dialog.component.html 第 4 行
this.form.get 不是 function
对话框.html
<mat-dialog-content>
<form [formGroup]="productForm" (ngSubmit)="onSubmit()"> // here is line 4
<div class="from-group">
<label for="name">Nom</label>
<input id="name" type="text" formControlName="name" class="form-control">
</div>
<div class="from-group">
<label for="price">Prix</label>
<input id="price" type="number" formControlName="price" class="form-control">
</div>
<div class="from-group">
<label for="comment">Commentaire</label>
<input id="comment" type="text" formControlName="comment" class="form-control">
</div>
<div class="from-group">
<label for="expiration">date de péremption</label>
<input id="expiration" type="date" formControlName="date" class="form-control">
</div>
<mat-dialog-actions>
<button>Valider</button>
</mat-dialog-actions>
</form>
</mat-dialog-content>
对话框.ts
export class DialogFormComponent implements OnInit {
productForm: any = FormGroup;
constructor(private fb: FormBuilder,
public dialogRef: MatDialogRef<DialogFormComponent>,
@Inject(MAT_DIALOG_DATA) public data:any) { }
ngOnInit() {
this.initDialogForm();
}
initDialogForm() {
this.productForm = this.fb.group({
id: [this.data.id],
name: [this.data.name , Validators.required],
price: [this.data.price , Validators.required],
comment: [this.data.comment , Validators.required],
date : [this.data.date]
});
}
resetValue() {
this.productForm.controls['date'].setValue(this.currentDate());
}
currentDate() {
const currentDate = new Date();
return currentDate.toISOString().substring(0,10);
}
onSubmit() {
this.dialogRef.close(this.productForm.value);
console.log(this.productForm.value);
}
}
这是我的 angular 材料表，我在其中显示对话框中的数据。
产品.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Nom</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Price Column -->
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Prix</th>
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
</ng-container>
<!-- Comment Column -->
<ng-container matColumnDef="comment">
<th class="text" mat-header-cell *matHeaderCellDef>Commentaire</th>
<td class="text2" mat-cell *matCellDef="let element"> {{element.comment}} </td>
</ng-container>
<!-- Expiration Column -->
<ng-container matColumnDef="expiration">
<th mat-header-cell *matHeaderCellDef>date de <br> péremption</th>
<td mat-cell *matCellDef="let element"> {{element.expiration}} </td>
</ng-container>
<!-- Action Column-->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let row">
<button mat-raised-button color="primary" (click)="editFormDialog(row)">Edit</button>
<button mat-raised-button color="warn" (click)="delete(row)">Supprimer</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div class="demo-button-container">
<button mat-raised-button class="add_button" (click)= "openFormDialog()" class="demo-button">
+
</button>
产品.ts
export class ProduitsComponent implements OnInit {
displayedColumns: string[] = ['name', 'price', 'comment', 'expiration', "actions"];
public dataSource: MatTableDataSource<Produit>;
constructor(private produitService: ProduitService, public dialog: MatDialog) { }
ngOnInit() {
this.getLatestProduct();
}
createNewProduct(product: any) {
this.produitService.createProduct(product).subscribe((response: Produit) => {
let newProductArray = this.dataSource.data;
newProductArray.push(response);
this.dataSource.data = newProductArray;
});
}
updateLatestProduct(product: Produit) {
this.produitService.updateProduct(product).subscribe(response => {
let index = this.dataSource.data.findIndex((value) => {value.id === product.id});
this.dataSource.data.splice(index, 1, response);
});
}
getLatestProduct() {
let resp = this.produitService.getAllProduct();
resp.subscribe(result => {
this.dataSource = new MatTableDataSource<Produit>();
this.dataSource.data = result as Produit[];
});
}
delete(product: Produit) {
this.produitService.deleteProduct(product).subscribe(resp => {
this.dataSource.data.filter((value) => {
return value.id != product.id;
});
});
this.getLatestProduct();
}
editFormDialog(row: Produit) {
const dialogRef = this.dialog.open(DialogFormComponent, {
data: row
});
dialogRef.afterClosed().subscribe(result => {
this.updateLatestProduct(result);
this.getLatestProduct();
});
}
openFormDialog() {
const dialogRef = this.dialog.open(DialogFormComponent, {});
dialogRef.afterClosed().subscribe(result => {
this.createNewProduct(result);
});
}
}
2 个解决方案
解决方案1
2 已采纳 2021-06-15 09:22:25
我在一个对话框中创建了一个反应式表单，该表单在表格中显示表单的数据（来自 angular 材料），几乎一切正常，问题是我单击打开对话框我有错误消息，尽管我不明白研究。
1.this.data 为 null。
this.form._updateTreeValidity 不是 function 此错误来自 dialog.component.html 第 4 行
this.form.get 不是 function
对话框.html
<mat-dialog-content>
<form [formGroup]="productForm" (ngSubmit)="onSubmit()"> // here is line 4
<div class="from-group">
<label for="name">Nom</label>
<input id="name" type="text" formControlName="name" class="form-control">
</div>
<div class="from-group">
<label for="price">Prix</label>
<input id="price" type="number" formControlName="price" class="form-control">
</div>
<div class="from-group">
<label for="comment">Commentaire</label>
<input id="comment" type="text" formControlName="comment" class="form-control">
</div>
<div class="from-group">
<label for="expiration">date de péremption</label>
<input id="expiration" type="date" formControlName="date" class="form-control">
</div>
<mat-dialog-actions>
<button>Valider</button>
</mat-dialog-actions>
</form>
</mat-dialog-content>
对话框.ts
export class DialogFormComponent implements OnInit {
productForm: any = FormGroup;
constructor(private fb: FormBuilder,
public dialogRef: MatDialogRef<DialogFormComponent>,
@Inject(MAT_DIALOG_DATA) public data:any) { }
ngOnInit() {
this.initDialogForm();
}
initDialogForm() {
this.productForm = this.fb.group({
id: [this.data.id],
name: [this.data.name , Validators.required],
price: [this.data.price , Validators.required],
comment: [this.data.comment , Validators.required],
date : [this.data.date]
});
}
resetValue() {
this.productForm.controls['date'].setValue(this.currentDate());
}
currentDate() {
const currentDate = new Date();
return currentDate.toISOString().substring(0,10);
}
onSubmit() {
this.dialogRef.close(this.productForm.value);
console.log(this.productForm.value);
}
}
这是我的 angular 材料表，我在其中显示对话框中的数据。
产品.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Nom</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Price Column -->
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Prix</th>
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
</ng-container>
<!-- Comment Column -->
<ng-container matColumnDef="comment">
<th class="text" mat-header-cell *matHeaderCellDef>Commentaire</th>
<td class="text2" mat-cell *matCellDef="let element"> {{element.comment}} </td>
</ng-container>
<!-- Expiration Column -->
<ng-container matColumnDef="expiration">
<th mat-header-cell *matHeaderCellDef>date de <br> péremption</th>
<td mat-cell *matCellDef="let element"> {{element.expiration}} </td>
</ng-container>
<!-- Action Column-->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let row">
<button mat-raised-button color="primary" (click)="editFormDialog(row)">Edit</button>
<button mat-raised-button color="warn" (click)="delete(row)">Supprimer</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div class="demo-button-container">
<button mat-raised-button class="add_button" (click)= "openFormDialog()" class="demo-button">
+
</button>
产品.ts
export class ProduitsComponent implements OnInit {
displayedColumns: string[] = ['name', 'price', 'comment', 'expiration', "actions"];
public dataSource: MatTableDataSource<Produit>;
constructor(private produitService: ProduitService, public dialog: MatDialog) { }
ngOnInit() {
this.getLatestProduct();
}
createNewProduct(product: any) {
this.produitService.createProduct(product).subscribe((response: Produit) => {
let newProductArray = this.dataSource.data;
newProductArray.push(response);
this.dataSource.data = newProductArray;
});
}
updateLatestProduct(product: Produit) {
this.produitService.updateProduct(product).subscribe(response => {
let index = this.dataSource.data.findIndex((value) => {value.id === product.id});
this.dataSource.data.splice(index, 1, response);
});
}
getLatestProduct() {
let resp = this.produitService.getAllProduct();
resp.subscribe(result => {
this.dataSource = new MatTableDataSource<Produit>();
this.dataSource.data = result as Produit[];
});
}
delete(product: Produit) {
this.produitService.deleteProduct(product).subscribe(resp => {
this.dataSource.data.filter((value) => {
return value.id != product.id;
});
});
this.getLatestProduct();
}
editFormDialog(row: Produit) {
const dialogRef = this.dialog.open(DialogFormComponent, {
data: row
});
dialogRef.afterClosed().subscribe(result => {
this.updateLatestProduct(result);
this.getLatestProduct();
});
}
openFormDialog() {
const dialogRef = this.dialog.open(DialogFormComponent, {});
dialogRef.afterClosed().subscribe(result => {
this.createNewProduct(result);
});
}
}
解决方案2
0 2021-06-15 08:25:34
我在一个对话框中创建了一个反应式表单，该表单在表格中显示表单的数据（来自 angular 材料），几乎一切正常，问题是我单击打开对话框我有错误消息，尽管我不明白研究。
1.this.data 为 null。
this.form._updateTreeValidity 不是 function 此错误来自 dialog.component.html 第 4 行
this.form.get 不是 function
对话框.html
<mat-dialog-content>
<form [formGroup]="productForm" (ngSubmit)="onSubmit()"> // here is line 4
<div class="from-group">
<label for="name">Nom</label>
<input id="name" type="text" formControlName="name" class="form-control">
</div>
<div class="from-group">
<label for="price">Prix</label>
<input id="price" type="number" formControlName="price" class="form-control">
</div>
<div class="from-group">
<label for="comment">Commentaire</label>
<input id="comment" type="text" formControlName="comment" class="form-control">
</div>
<div class="from-group">
<label for="expiration">date de péremption</label>
<input id="expiration" type="date" formControlName="date" class="form-control">
</div>
<mat-dialog-actions>
<button>Valider</button>
</mat-dialog-actions>
</form>
</mat-dialog-content>
对话框.ts
export class DialogFormComponent implements OnInit {
productForm: any = FormGroup;
constructor(private fb: FormBuilder,
public dialogRef: MatDialogRef<DialogFormComponent>,
@Inject(MAT_DIALOG_DATA) public data:any) { }
ngOnInit() {
this.initDialogForm();
}
initDialogForm() {
this.productForm = this.fb.group({
id: [this.data.id],
name: [this.data.name , Validators.required],
price: [this.data.price , Validators.required],
comment: [this.data.comment , Validators.required],
date : [this.data.date]
});
}
resetValue() {
this.productForm.controls['date'].setValue(this.currentDate());
}
currentDate() {
const currentDate = new Date();
return currentDate.toISOString().substring(0,10);
}
onSubmit() {
this.dialogRef.close(this.productForm.value);
console.log(this.productForm.value);
}
}
这是我的 angular 材料表，我在其中显示对话框中的数据。
产品.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Nom</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Price Column -->
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Prix</th>
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
</ng-container>
<!-- Comment Column -->
<ng-container matColumnDef="comment">
<th class="text" mat-header-cell *matHeaderCellDef>Commentaire</th>
<td class="text2" mat-cell *matCellDef="let element"> {{element.comment}} </td>
</ng-container>
<!-- Expiration Column -->
<ng-container matColumnDef="expiration">
<th mat-header-cell *matHeaderCellDef>date de <br> péremption</th>
<td mat-cell *matCellDef="let element"> {{element.expiration}} </td>
</ng-container>
<!-- Action Column-->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let row">
<button mat-raised-button color="primary" (click)="editFormDialog(row)">Edit</button>
<button mat-raised-button color="warn" (click)="delete(row)">Supprimer</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div class="demo-button-container">
<button mat-raised-button class="add_button" (click)= "openFormDialog()" class="demo-button">
+
</button>
产品.ts
export class ProduitsComponent implements OnInit {
displayedColumns: string[] = ['name', 'price', 'comment', 'expiration', "actions"];
public dataSource: MatTableDataSource<Produit>;
constructor(private produitService: ProduitService, public dialog: MatDialog) { }
ngOnInit() {
this.getLatestProduct();
}
createNewProduct(product: any) {
this.produitService.createProduct(product).subscribe((response: Produit) => {
let newProductArray = this.dataSource.data;
newProductArray.push(response);
this.dataSource.data = newProductArray;
});
}
updateLatestProduct(product: Produit) {
this.produitService.updateProduct(product).subscribe(response => {
let index = this.dataSource.data.findIndex((value) => {value.id === product.id});
this.dataSource.data.splice(index, 1, response);
});
}
getLatestProduct() {
let resp = this.produitService.getAllProduct();
resp.subscribe(result => {
this.dataSource = new MatTableDataSource<Produit>();
this.dataSource.data = result as Produit[];
});
}
delete(product: Produit) {
this.produitService.deleteProduct(product).subscribe(resp => {
this.dataSource.data.filter((value) => {
return value.id != product.id;
});
});
this.getLatestProduct();
}
editFormDialog(row: Produit) {
const dialogRef = this.dialog.open(DialogFormComponent, {
data: row
});
dialogRef.afterClosed().subscribe(result => {
this.updateLatestProduct(result);
this.getLatestProduct();
});
}
openFormDialog() {
const dialogRef = this.dialog.open(DialogFormComponent, {});
dialogRef.afterClosed().subscribe(result => {
this.createNewProduct(result);
});
}
}
对话框，形式为angular2
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.