<div class="container">
<h1>Add Product Demo</h1>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="Id">p_id</label>
<input formControlName="p_id" type="number" id="p_id" class="form-control">
</div>
<div class="alert alert-danger" *ngIf="myForm.get('p_id').hasError('required') && myForm.get('p_id').touched">
p_id is required
</div>
<div class="form-group">
<label for="pname">pname</label>
<input formControlName="pname" type="text" id="pname" class="form-control">
</div>
<div class="alert alert-danger" *ngIf="(myForm.get('pname').hasError('required') || myForm.get('pname').invalid ) && myForm.get('pname').touched ">
product name is required and it shouldn't be Example
</div>
<div class="form-group">
<label for="pprice">pprice</label>
<input formControlName="pprice" type="text" id="pprice" class="form-control">
</div>
<div class="alert alert-danger" *ngIf="(myForm.get('pprice').hasError('required') || myForm.get('pprice').invalid) && myForm.get('pprice').touched">
pprice is required and must be positive value
</div>
<div class="form-group">
<label for="pimg">pimg</label>
<input formControlName="pimg" type="text" id="pimg" class="form-control">
</div>
<div class="alert alert-danger" *ngIf="myForm.get('pimg').hasError('required') && myForm.get('pimg').touched">
pimg is required
</div>
<div class="form-group">
<label for="soh">soh</label>
<input formControlName="soh" type="text" id="soh" class="form-control">
</div>
<div class="alert alert-danger" *ngIf="(myForm.get('soh').hasError('required') || myForm.get('soh').invalid) && myForm.get('soh').touched">
soh is required and maximum soh would be 10
</div>
<button type="submit" [disabled]="!myForm.valid" class="btn btn-primary">Add Product</button>

</form>
</div>