[英]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);
});
}
}
我在一個對話框中創建了一個反應式表單,該表單在表格中顯示表單的數據(來自 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);
});
}
}
我在一個對話框中創建了一個反應式表單,該表單在表格中顯示表單的數據(來自 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);
});
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.