|
| 1 | +import { Component, OnInit, ViewChild } from '@angular/core'; |
| 2 | +import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; |
| 3 | +import { IgxGridCell, IgxHierarchicalGridComponent } from 'igniteui-angular'; |
| 4 | +import { IGridFormGroupCreatedEventArgs } from 'igniteui-angular/lib/grids/common/grid.interface'; |
| 5 | +import { CUSTOMERS } from '../../data/hierarchical-data'; |
| 6 | + |
| 7 | +@Component({ |
| 8 | + selector: 'hierarchical-grid-cross-field-validation', |
| 9 | + styleUrls: ['./hierarchical-grid-cross-field-validation.component.scss'], |
| 10 | + templateUrl: 'hierarchical-grid-cross-field-validation.component.html' |
| 11 | +}) |
| 12 | + |
| 13 | +export class HierarchicalGridValidatorServiceCrossCellComponent implements OnInit { |
| 14 | + public localdata; |
| 15 | + public countryData: Map<string, object>; |
| 16 | + public countries = []; |
| 17 | + public cities = []; |
| 18 | + |
| 19 | + @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent }) |
| 20 | + public grid: IgxHierarchicalGridComponent; |
| 21 | + |
| 22 | + constructor() { |
| 23 | + |
| 24 | + } |
| 25 | + public ngOnInit(): void { |
| 26 | + this.localdata = CUSTOMERS.filter((rec, index, arr) => arr.findIndex(x => x.CustomerID === rec.CustomerID) === index); |
| 27 | + this.countryData = new Map(this.localdata.map(i => [i.Country, {}])); |
| 28 | + this.localdata.forEach(rec => { |
| 29 | + const country = rec.Country; |
| 30 | + const city = rec.City; |
| 31 | + this.countryData.get(country)[city] = city; |
| 32 | + }); |
| 33 | + this.countries = [...new Set(this.localdata.map(x => x.Country))]; |
| 34 | + this.cities = [...new Set(this.localdata.map(x => x.City))]; |
| 35 | + } |
| 36 | + |
| 37 | + public formCreateCustomerHandler(event: IGridFormGroupCreatedEventArgs) { |
| 38 | + const formGroup = event.formGroup; |
| 39 | + formGroup.addValidators(this.addressValidator()); |
| 40 | + } |
| 41 | + |
| 42 | + public formCreateOrderHandler(event: IGridFormGroupCreatedEventArgs) { |
| 43 | + const formGroup = event.formGroup; |
| 44 | + formGroup.addValidators(this.dateValidator()); |
| 45 | + } |
| 46 | + |
| 47 | + public addressValidator(): ValidatorFn { |
| 48 | + return (control: AbstractControl): ValidationErrors | null => { |
| 49 | + const formGroup = control; |
| 50 | + let returnObject = {}; |
| 51 | + const city = formGroup.get('City'); |
| 52 | + const country = formGroup.get('Country'); |
| 53 | + const validCities = this.countryData.get(country.value); |
| 54 | + if (!validCities || !validCities[city.value]) { |
| 55 | + returnObject['invalidAddress'] = true; |
| 56 | + } |
| 57 | + return returnObject; |
| 58 | + } |
| 59 | + } |
| 60 | + |
| 61 | + public dateValidator(): ValidatorFn { |
| 62 | + return (control: AbstractControl): ValidationErrors | null => { |
| 63 | + const formGroup = control; |
| 64 | + let returnObject = {}; |
| 65 | + const orderDate = formGroup.get('OrderDate').value; |
| 66 | + const shippedDate = formGroup.get('ShippedDate').value; |
| 67 | + if (new Date(shippedDate) < new Date(orderDate)) { |
| 68 | + returnObject['invalidRange'] = true; |
| 69 | + } |
| 70 | + return returnObject; |
| 71 | + } |
| 72 | + } |
| 73 | + |
| 74 | + public isRowValid(cell: IgxGridCell) { |
| 75 | + const hasErrors = !!cell.row.validation.errors || cell.row.cells.some(x => !!x.validation.errors); |
| 76 | + return !hasErrors; |
| 77 | + } |
| 78 | + |
| 79 | + public stateMessage(cell: IgxGridCell) { |
| 80 | + const messages = []; |
| 81 | + const row = cell.row; |
| 82 | + if (row.validation.errors?.invalidAddress) { |
| 83 | + messages.push('The address information is invalid. City does not match the Country.'); |
| 84 | + } |
| 85 | + if (row.validation.errors?.invalidRange) { |
| 86 | + messages.push('The ShippedDate cannot be before the OrderDate.'); |
| 87 | + } |
| 88 | + const cellValidationErrors = row.cells.filter(x => !!x.validation.errors); |
| 89 | + if (cellValidationErrors && cellValidationErrors.length > 0) { |
| 90 | + const fields = cellValidationErrors.map(x => x.column.field).join(','); |
| 91 | + messages.push('The following fields are required: ' + fields); |
| 92 | + } |
| 93 | + |
| 94 | + if (messages.length === 0) { |
| 95 | + // no errors |
| 96 | + return ['Valid']; |
| 97 | + } |
| 98 | + return messages; |
| 99 | + } |
| 100 | + |
| 101 | + public commit(grid: IgxHierarchicalGridComponent) { |
| 102 | + const invalidTransactions = grid.validation.getInvalid(); |
| 103 | + if (invalidTransactions.length > 0 && !confirm('You\'re commiting invalid transactions. Are you sure?')) { |
| 104 | + return; |
| 105 | + } |
| 106 | + |
| 107 | + grid.transactions.commit(grid.data); |
| 108 | + grid.validation.clear(); |
| 109 | + } |
| 110 | +} |
0 commit comments