Angular Form validation issue for Array form section
Hi there,
I have some issue with the validation of the group array section. For e.g. the quantity field is not validating once I select the raw material from the drop down menu. I have attached a video to make things easy to understand.
I have some issue with the validation of the group array section. For e.g. the quantity field is not validating once I select the raw material from the drop down menu. I have attached a video to make things easy to understand.
<div fxLayout="row wrap" fxLayoutAlign="space-between center">
<div fxFlex.gt-sm="49" fxFlex.gt-xs="49" fxFlex="100">
<mat-form-field class="full-wid mrgn-b-md">
<mat-label>{{'Manufacturer'|translate}}</mat-label>
<mat-select formControlName="contractmfg" class="form-control">
<mat-option disabled selected hidden>{{'Manufacturer'|translate}}</mat-option>
<mat-option *ngFor="let contractmfg_mode of contractmfgOption" [value]="contractmfg_mode.contractmfgid">{{contractmfg_mode.name}}</mat-option>
</mat-select>
<mat-error *ngIf="form.controls['contractmfg'].hasError('required')">{{'You must make a selection'|translate}}</mat-error>
</mat-form-field>
</div>
</div>
<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" (selectionChange)="onProductValueChange($event,i)">
<mat-option disabled selected hidden>{{'Raw Material'|translate}}</mat-option>
<mat-option *ngFor="let product_mode of productOption"
[value]="product_mode.rawmaterialid">{{product_mode.name}}</mat-option>
</mat-select>
<mat-error *ngIf="products.controls[i].get('rawmaterialid').hasError('required')"> {{'Select Raw Material'|translate}} </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').dirty||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 quantityyy.'|translate}} </mat-error>
</mat-error> -->
<mat-error *ngIf="(products.controls[i].get('qty').dirty||products.controls[i].get('qty').touched) && products.controls[i].get('qty').hasError('required') && products.controls[i].get('qty').invalid"> {{'You must include a quantity.'|translate}} </mat-error>
<mat-error *ngIf="products.controls[i].get('qty').hasError('max') && products.controls[i].get('qty').touched"> {{'Quantity should be less then available Qty.'|translate}} {{availabeQty}} </mat-error>
</mat-form-field>
</div>{{products.controls[i].get('qty').dirty}} {{products.controls[i].get('qty').touched}} {{ products.controls[i].get('qty').hasError('required')}} {{ products.controls[i].get('qty').invalid}}
<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>
<div *ngIf="!_isUpdating" fxLayout="row wrap" fxLayoutAlign="space-between center">
<button class="mrgn-all-xs" mat-mini-fab [disabled]="!products.valid" (click)="addProduct()">
<mat-icon>add</mat-icon>
</button>
<small class="gene-block" *ngIf="this.errorMessage" class="warn-text">{{'Please correct the validation errors.'|translate}}</small>
</div>
<div fxLayout="row wrap" fxLayoutAlign="space-between center">
<mat-card-actions>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">{{'SUBMIT' | translate}}</button>
</mat-card-actions>
</div>
</form>
</div>
</mat-card>
</div>
ASKER
Thanks for your response.
You see when i select raw material and then enter a qty and then clear the qty then the validation for qty is not being done for some reason.
You see when i select raw material and then enter a qty and then clear the qty then the validation for qty is not being done for some reason.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If I watch the video I see the following
1. You can enter a quantity without a Raw Material being selected
2. Once the rawmaterial is selected validation on the quantity field seems to work
I am just not clear on exactly what the problem is. It looks like validation is working - the only thing I can see that needs to be done is to disable the Quantity control if RawMaterial is not selected?
Can you highlight exactly what the problem is.