Zolf
asked on
Angular validation not working for edit form
Hi there,
I am trying to valid my quantity component to not be empty when the user wants to edit it other elements in the form are disabled. Only quantity element is allowed for edit. But for some reason when I clear the quantity input, the error mechanism does not kick in. For New case it is working but not for Edit. Below is my html code. Appreciate your help.
I am trying to valid my quantity component to not be empty when the user wants to edit it other elements in the form are disabled. Only quantity element is allowed for edit. But for some reason when I clear the quantity input, the error mechanism does not kick in. For New case it is working but not for Edit. Below is my html code. Appreciate your help.
<div formArrayName="rawmaterialwh">
<div [formGroupName]="i"
*ngFor="let product of products.controls; let i=index">
<legend>{{i+1}}</legend>
<div fxLayout="row wrap" fxLayoutAlign="space-between center">
<mat-form-field attr.for="{{'rawmaterialid' + i}}">
<mat-label>{{'Raw Material'|translate}}</mat-label>
<mat-select formControlName="rawmaterialid">
<mat-option disabled selected hidden>{{'Raw Material'|translate}}</mat-option>
<mat-option *ngFor="let product_mode of productOption"
[value]="product_mode.rawmaterialid">{{product_mode.rawmaterialname}}</mat-option>
</mat-select>
<mat-error *ngIf="products.controls[i].get('rawmaterialid').touched && !products.controls[i].get('rawmaterialid').valid">
<mat-error *ngIf="products.controls[i].get('rawmaterialid').hasError('required')"> {{'Select Raw Material'|translate}} </mat-error>
</mat-error>
</mat-form-field>
<div fxFlex.gt-sm="49" fxFlex.gt-xs="49" fxFlex="100">
<mat-form-field class="full-wid mrgn-b-md">
<mat-label>{{'Quantity'|translate}}</mat-label>
<input matInput formControlName="qty">
<mat-error *ngIf="products.controls[i].get('qty').touched && !products.controls[i].get('qty').valid">
<mat-error *ngIf="products.controls[i].get('qty').hasError('required')"> {{'You must include a quantity.'|translate}} </mat-error>
</mat-error>
</mat-form-field>
</div>
<button *ngIf="!_isUpdating" class="mrgn-all-xs" class="mrgn-all-xs" mat-mini-fab color="warn"
(click)="deleteProduct(i)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.