I want to pull data from the API to the dialog form by id for editing using activatedroute. When I define the ID section in URL, it returns as undefined or null. However, when I enter ID section in URL manually, I can pull data into the form. I think there is a problem with activatedroute. I would like to ask for help from those who have knowledge of this subject.
ngOnInit(): void {
this.loadWaters();
// this.id = this.route.snapshot.paramMap.get['id'];
// this.id = this.route.snapshot.params['id'];
// this.route.paramMap.subscribe(params => {
// console.log(params.get('id'));
// });
this.loadProducts();
// this.id=this.activatedRoute.snapshot.paramMap.get('id');
this.id = this.activatedRoute.snapshot.paramMap.get['id'];
this.productService.getById(this.id)
.pipe(first())
.subscribe(x => this.productValidation.patchValue(x));
this.productValidation = this.formBuilder.group({
productCode: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(50)]],
productName: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(50), Validators.pattern('^[a-zA-Z ]*$')]],
bottleType: ['', [Validators.required]],
palletType: ['', [Validators.required]],
palletNumber: ['', [Validators.required]],
recipeCode: ['', [Validators.required]],
startBrix: ['', [Validators.required, Validators.min(0), Validators.max(11)]],
endBrix: ['', [Validators.required, Validators.min(0), Validators.max(11)]],
startCo2: ['', [Validators.required, Validators.min(0), Validators.max(10)]],
endCo2: ['', [Validators.required, Validators.min(0), Validators.max(10)]],
maschineCode: ['', [Validators.required]],
expiryStartDate: [new FormControl((new Date())), [Validators.required]],
expiryEndDate: [new FormControl((new Date())), [Validators.required]],
nitrogen: [false],
weight: ['', [Validators.required]],
waterId: [''],
});
this.loadProducts();
this.id=this.activatedRoute.snapshot.paramMap.get('id');
this.productService.getById(this.id)
.pipe(first())
.subscribe(x => this.productValidation.patchValue(x));
}
private loadProducts() {
this.productService.getById(this.id).pipe(first()).subscribe((data: ProductResponse) => {
this.products = data.products;
});
}
Product Service
getById(id:string): Observable<ProductResponse> {
return this.httpclient.get<ProductResponse>('https://localhost:xxxx/api/Products/'+id).pipe(
map((data) => data),
catchError((error) => throwError(error))
);
}
}
export interface ProductResponse {
products: Update_Products[
];
}
Html:
<div class="container-fluid">
<p style="text-align: center; font-weight: bold; font-size: 20px;color: rgb(13, 13, 190);">Update Product</p>
<form [formGroup]="productValidation" >
<mat-form-field appearance="outline" class="product-update">
<mat-label>Product Code</mat-label>
<input matInput #txtproductcode formControlName="productCode" >
<mat-error *ngIf="productValidation.get('productCode')?.hasError('required')">
Product Code is Required!
</mat-error>
<mat-error *ngIf="productValidation.get('productCode')?.hasError('minlength')">
Product Code should be atleast 5 characters long!
</mat-error>
<mat-error *ngIf="productValidation.get('productCode')?.hasError('maxlength')">
Product Code can be atmax 50 characters long!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update">
<mat-label>Product Name</mat-label>
<input matInput #txtproductname formControlName="productName">
<mat-error *ngIf="productValidation.get('productName')?.hasError('required')">
Product Name is Required!
</mat-error>
<mat-error *ngIf="productValidation.get('productName')?.hasError('minlength')">
Product Name should be atleast 5 characters long!
</mat-error>
<mat-error *ngIf="productValidation.get('productName')?.hasError('maxlength')">
Product Name can be atmax 50 characters long!
</mat-error>
<mat-error *ngIf="productValidation.get('productName')?.hasError('pattern')">
Product Name not matched by pattern!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update">
<mat-label>Bottle Type</mat-label>
<input matInput #bottletype formControlName="bottleType">
<mat-error *ngIf="productValidation.get('bottleType')?.hasError('required')">
Bottle type is Required!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update">
<mat-label>Pallet Type</mat-label>
<input matInput #pallettype formControlName="palletType">
<mat-error *ngIf="productValidation.get('palletType')?.hasError('required')">
Pallet type is Required!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update">
<mat-label>Pallet Number</mat-label>
<input matInput #palletnumber formControlName="palletNumber">
<mat-error *ngIf="productValidation.get('palletNumber')?.hasError('required')">
Pallet number is Required!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update">
<mat-label>Recipe Code</mat-label>
<input matInput #recipecode formControlName="recipeCode">
<mat-error *ngIf="productValidation.get('recipeCode')?.hasError('required')">
Recipe code is Required!
</mat-error>
</mat-form-field>
<section class="product-update">
<mat-checkbox #nitrogen formControlName="nitrogen" class="example-margin">Nitrogen
</mat-checkbox>
</section>
<mat-form-field appearance="outline" class="product-update">
<mat-label>Start Brix</mat-label>
<input matInput type="number" min="0" value="0" #startbrix formControlName="startBrix">
<mat-error *ngIf="productValidation.get('startBrix')?.hasError('required')">
Start Brix value is Required!
</mat-error>
<mat-error *ngIf="productValidation.get('startBrix')?.hasError('min')">
Start Brix value cannot be negative!
</mat-error>
<mat-error *ngIf="productValidation.get('startBrix')?.hasError('max')">
Start Brix value cannot be more than 10!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update">
<mat-label>End Brix</mat-label>
<input matInput type="number" min="0" value="0" #endbrix formControlName="endBrix">
<mat-error *ngIf="productValidation.get('endBrix')?.hasError('required')">
End Brix value is Required!
</mat-error>
<mat-error *ngIf="productValidation.get('endBrix')?.hasError('min')">
End Brix value cannot be negative!
</mat-error>
<mat-error *ngIf="productValidation.get('endBrix')?.hasError('max')">
End Brix value cannot be more than 10!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update" >
<mat-label>Start CO2</mat-label>
<input matInput type="number" min="0" value="0" #startco2 formControlName="startCo2">
<mat-error *ngIf="productValidation.get('startCo2')?.hasError('required')">
Start CO2 value is Required!
</mat-error>
<mat-error *ngIf="productValidation.get('startCo2')?.hasError('min')">
Start CO2 value cannot be negative!
</mat-error>
<mat-error *ngIf="productValidation.get('startCo2')?.hasError('max')">
Start CO2 value cannot be more than 10!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update" >
<mat-label>End CO2</mat-label>
<input matInput type="number" min="0" value="0" #endco2 formControlName="endCo2" >
<mat-error *ngIf="productValidation.get('endCo2')?.hasError('required')">
End CO2 value is Required!
</mat-error>
<mat-error *ngIf="productValidation.get('endCo2')?.hasError('min')">
End CO2 value cannot be negative!
</mat-error>
<mat-error *ngIf="productValidation.get('endCo2')?.hasError('max')">
End CO2 value cannot be more than 10!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update">
<mat-label>Weight</mat-label>
<input matInput type="number" min="0" value="0" #weight formControlName="weight">
<mat-error *ngIf="productValidation.get('weight')?.hasError('required')">
Weight value is Required!
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="product-update">
<mat-label>Maschine Code</mat-label>
<input matInput #maschinecode formControlName="maschineCode">
<mat-error *ngIf="productValidation.get('maschineCode')?.hasError('required')">
Maschine code is Required!
</mat-error>
</mat-form-field>
<div>
<mat-form-field class="product-update">
<mat-label>Water</mat-label>
<mat-select formControlName="waterId">
<mat-option *ngFor="let water of waters" [value]="water.id">
{{water?.waterType}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-form-field class="product-update">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [rangePicker]="picker" >
<input matStartDate placeholder="Start date" #expiryStartDate formControlName="expiryStartDate"
data-date-format='YYYY-MM-DD'>
<mat-error *ngIf="productValidation.get('expiryStartDate')?.hasError('required')">
Expire date end value is Required!
</mat-error>
<input matEndDate placeholder="End date" #expiryenddate formControlName="expiryEndDate"
data-date-format='YYYY-MM-DD'>
<mat-error *ngIf="productValidation.get('expiryEndDate')?.hasError('required')">
Expire date end value is Required!
</mat-error>
</mat-date-range-input>
<mat-hint>YYYY/MM/DD – YYYY/MM/DD</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
<div style="text-align: center; width: auto;">
<div style="margin:5px; display: inline-block;"><button mat-raised-button class="btn" color="primary" (click)="update()"
>Create</button>
</div>
</div>
</form>
Update_Products
export class Update_Products {
productCode : string;
productName : string;
bottleType : string;
palletType : string;
palletNumber : string;
recipeCode : string;
startBrix : number;
endBrix : number;
startCo2 : number;
endCo2 : number;
maschineCode : string;
expiryStartDate : Date | string;
expiryEndDate : Date | string;
nitrogen :Boolean;
weight :number;
watertype :string;
}
dialog:
update(id: string) {
this.dialogService.openDialog({
componentType: UpdateComponent,
data: id,
options: {
width: "800px",
height:"700px"
}
});
}
5