dialog angular form errors
Question
I created a reactive form in a dialog that displays the data of the form in a table ( from angular material ), almost everything works fine, the problem is that I click to open the dialog I have error messages that I do not understand despite my research.
1.this.data is null.
this.form._updateTreeValidity is not a function this error from dialog.component.html line 4
this.form.get is not a function
dialog.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>
dialog.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);
}
}
and this is my angular material table where i display data from the dialog.
produits.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>
produits.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 answers
solution1
2 ACCPTED 2021-06-15 09:22:25
I created a reactive form in a dialog that displays the data of the form in a table ( from angular material ), almost everything works fine, the problem is that I click to open the dialog I have error messages that I do not understand despite my research.
1.this.data is null.
this.form._updateTreeValidity is not a function this error from dialog.component.html line 4
this.form.get is not a function
dialog.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>
dialog.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);
}
}
and this is my angular material table where i display data from the dialog.
produits.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>
produits.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);
});
}
}
solution2
0 2021-06-15 08:25:34
I created a reactive form in a dialog that displays the data of the form in a table ( from angular material ), almost everything works fine, the problem is that I click to open the dialog I have error messages that I do not understand despite my research.
1.this.data is null.
this.form._updateTreeValidity is not a function this error from dialog.component.html line 4
this.form.get is not a function
dialog.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>
dialog.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);
}
}
and this is my angular material table where i display data from the dialog.
produits.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>
produits.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);
});
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Dialog with form in angular2
Validate form in dialog Angular
Angular 2 form validation errors
Angular 2 submits form even with errors
angular 4 form validation for input errors
Angular Clear form control errors
Submit form from Angular Dialog Template
Angular material dialog form is not resetting after submit
How to create validated form in angular material dialog
Angular Material 2 dialog with form test failing
Related Tags