Link to home
Start Free TrialLog in
Avatar of Zolf
ZolfFlag for United Arab Emirates

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.

<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>



Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Ferruccio Accalai
Ferruccio Accalai
Flag of Italy image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial