Angular 계층적 그리드 편집 및 검증
계층적 그리드의 편집은 셀/행을 편집할 때 사용자 입력에 대한 내장된 검증 메커니즘을 노출합니다. 잘 알려진 기능과 더 쉽게 통합할 수 있도록 Angular Form 검증 기능을 확장합니다. 편집기 상태가 변경되면 편집된 셀에 시각적 표시기가 적용됩니다.
구성
Configure via template-driven configuration
우리는 일부 Angular 폼 검증자 지침을 확장하여 직접 작업IgxColumn 할 수 있도록 합니다. 동일한 검증자들이 선언적으로igx-column 설정될 수 있는 속성으로도 제공됩니다. 다음 검증자들은 기본 사양으로 지원됩니다:
- 필수의
- 분
- 최대
- 이메일
- 최소 길이
- 최대 길이
- 무늬
열 입력이 설정되고 값이 이메일 형식으로 지정되는지 확인하려면 관련 지시문을 사용할 수 있습니다.
<igx-column [field]="email" [header]="User E-mail" required email></igx-column>
The following sample demonstrates how to use the prebuilt required, email and min validator directives in a Hierarchical Grid.
Configure via reactive forms
이벤트를 통해FormGroup 행/셀에서 편집이 시작될 때 검증에 사용될 'that'formGroupCreated을 공개합니다. 관련 필드에 대해 자신만의 검증기를 추가하여 수정할 수 있습니다:
<igx-hierarchical-grid (formGroupCreated)='formCreateHandler($event)' ...>
public formCreateHandler(args: IGridFormGroupCreatedEventArgs) {
const formGroup = args.formGroup;
const orderDateRecord = formGroup.get('OrderDate');
const requiredDateRecord = formGroup.get('RequiredDate');
const shippedDateRecord = formGroup.get('ShippedDate');
orderDateRecord.addValidators(this.futureDateValidator());
requiredDateRecord.addValidators(this.pastDateValidator());
shippedDateRecord.addValidators(this.pastDateValidator());
}
고유한 검증 함수를 작성하거나 기본 제공 Angular 검증 함수 중 하나를 사용할 수 있습니다.
Validation service API
그리드는 속성을 통해validation 검증 서비스를 제공합니다. 해당 서비스는 다음과 같은 공개 API를 가지고 있습니다:
valid- 그리드 검증 상태가 유효할 경우 반환합니다.getInvalid- 유효하지 않은 상태의 레코드를 반환합니다.clear- ID로 기록할 주를 해제하거나, ID가 제공되지 않을 경우 모든 주를 해제합니다.markAsTouched- 관련 레코드/필드를 터치된 것으로 표시합니다.
잘못된 상태는 유효성 검사 규칙에 따라 유효성 검사 오류가 수정되거나 지워질 때까지 유지됩니다.
Validation triggers
유효성 검사는 다음 시나리오에서 트리거됩니다.
- 그리드
validationTrigger에 기반한 셀 편집기를 통해 편집할 때. 에디터를 입력할 때나 에디터가 초점을 잃거나 닫힐 때 켜changeblur져 있습니다. - API를 통해 셀/행을 업데이트할 때 -
updateRow등updateCell. - 배치 편집과
undo트랜잭션 서비스의redoAPI를 사용할 때,
참고: 사용자 입력이나 편집 API를 통해 편집되지 않은 레코드에 대해서는 검증이 실행되지 않습니다. 셀의 시각적 표시는 관련 입력이 터치된 것으로 간주될 때만 표시됩니다 - 사용자 상호작용이나 검증 서비스의 API를 통
markAsTouched해서입니다.
Angular Hierarchical Grid Validation Customization Options
Set a custom validator
템플릿에서 a<igx-column>에 사용할 자신만의 검증 지침을 정의할 수 있습니다.
@Directive({
selector: '[phoneFormat]',
providers: [{ provide: NG_VALIDATORS, useExisting: PhoneFormatDirective, multi: true }]
})
export class PhoneFormatDirective extends Validators {
@Input('phoneFormat')
public phoneFormatString = '';
public validate(control: AbstractControl): ValidationErrors | null {
return this.phoneFormatString ? phoneFormatValidator(new RegExp(this.phoneFormatString, 'i'))(control)
: null;
}
}
앱 모듈에 정의되고 추가되면 그리드의 지정된 열에 선언적으로 설정할 수 있습니다.
<igx-column phoneFormat="\+\d{1}\-(?!0)(\d{3})\-(\d{3})\-(\d{4})\b" ...>
Change default error template
셀이 잘못된 상태에 들어갈 때 오류 도구 설명에 표시될 고유한 사용자 정의 오류 템플릿을 정의할 수 있습니다. 이는 사용자 정의 오류 메시지를 추가하거나 메시지의 모양이나 내용을 변경하려는 시나리오에서 유용합니다.
<igx-column ... >
<ng-template igxCellValidationError let-cell='cell' let-defaultErr="defaultErrorTemplate">
<ng-container *ngTemplateOutlet="defaultErr">
</ng-container>
<div *ngIf="cell.validation.errors?.['phoneFormat']">
Please enter correct phone format
</div>
</ng-template>
</igx-column>
Prevent exiting edit mode on invalid state
경우에 따라 데이터에 잘못된 값 제출을 허용하지 않는 것이 좋습니다. 그런 경우에는 또는cellEdit 이벤트를 사용rowEdit 해 새 값이 유효하지 않을 경우 이벤트를 취소할 수 있습니다. 두 사건의 논증은 성valid 질을 가지며 이에 따라 취소될 수 있다. 사용 방법은 교차 필드 검증 예 시에서 확인할 수 있습니다
<igx-hierarchical-grid (cellEdit)='cellEdit($event)' ...>
public cellEdit(evt) {
if (!evt.valid) {
evt.cancel = true;
}
}
Example
아래 예에서는 위에서 언급한 사용자 정의 옵션을 보여줍니다.
Cross-field validation
일부 상황에서는 한 필드의 검증이 레코드 내 다른 필드의 값에 의존할 수 있습니다. 이 경우 커스텀 검증기를 사용해 레코드 내 값을FormGroup 공유하는 값을 비교할 수 있습니다.
Cross-field validators can be added to the formGroup on the formGroupCreated event. In them multiple fields can be compared for validity.
public formCreateCustomerHandler(event: IGridFormGroupCreatedEventArgs) {
const formGroup = event.formGroup;
formGroup.addValidators(this.addressValidator());
}
public formCreateOrderHandler(event: IGridFormGroupCreatedEventArgs) {
const formGroup = event.formGroup;
formGroup.addValidators(this.dateValidator());
}
public addressValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const formGroup = control;
let returnObject = {};
const city = formGroup.get('City');
const country = formGroup.get('Country');
const validCities = this.countryData.get(country.value);
if (!validCities || !validCities[city.value]) {
returnObject['invalidAddress'] = true;
}
return returnObject;
}
}
public dateValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const formGroup = control;
let returnObject = {};
const orderDate = formGroup.get('OrderDate').value;
const shippedDate = formGroup.get('ShippedDate').value;
if (new Date(shippedDate) < new Date(orderDate)) {
returnObject['invalidRange'] = true;
}
return returnObject;
}
}
그러면 다중 필드 오류가 별도의 고정 열에 표시될 수 있습니다.
<igx-column field="row_valid" header=" " [editable]="false" [dataType]="'number'" [pinned]="true" [width]="'50px'">
<ng-template igxCell let-cell="cell">
<div *ngIf="isRowValid(cell)" [igxTooltipTarget]="tooltipRef"
>
<img width="18" src="assets/images/grid/active.png"/>
</div>
<div *ngIf="!isRowValid(cell)" [igxTooltipTarget]="tooltipRef"
>
<img width="18" src="assets/images/grid/expired.png"/>
</div>
<div #tooltipRef="tooltip" igxTooltip [style.width]="'max-content'">
<div *ngFor="let message of stateMessage(cell)">
{{message}}
</div>
</div>
</ng-template>
</igx-column>
행과 셀의 유효성을 기준으로 오류 및 자세한 메시지를 확인할 수 있습니다.
public isRowValid(cell: CellType) {
const hasErrors = !!cell.row.validation.errors || cell.row.cells.some(x => !!x.validation.errors);
return !hasErrors;
}
public stateMessage(cell: CellType) {
const messages = [];
const row = cell.row;
if (row.validation.errors?.invalidAddress) {
messages.push('The address information is invalid. City does not match the Country.');
}
if (row.validation.errors?.invalidRange) {
messages.push('The ShippedDate cannot be before the OrderDate.');
}
const cellValidationErrors = row.cells.filter(x => !!x.validation.errors);
if (cellValidationErrors && cellValidationErrors.length > 0) {
const fields = cellValidationErrors.map(x => x.column.field).join(',');
messages.push('The following fields are required: ' + fields);
}
if (messages.length === 0) {
// no errors
return ['Valid'];
}
return messages;
}
Cross-field example
아래 샘플은 루트 및 하위 데이터 모두에 대한 계층적 그리드의 교차 필드 유효성 검사를 보여줍니다.
스타일링
Ignite UI for Angular 사용하면 편집하는 동안 기본 유효성 검사 스타일을 변경할 수 있습니다.
아래 예에서는 도구 설명에 표시되는 유효성 검사 메시지에 대해 노출된 템플릿을 사용하고 오류 색상을 재정의하여 유효성 검사의 기본 모양을 수정합니다. 또한 유효하지 않은 행의 배경 스타일을 지정하여 더욱 뚜렷하게 만듭니다.
Import theme
스타일링과 CSS 변수 접근을 가장 쉬운 방법은 보통app 저희의 글로벌 스타일 파일에서styles.scss 스타일을 정의하는 것입니다. 가장 먼저 해야 할 일은 파일을 가져오themes/index는 것입니다 - 이렇게 하면 Ignite UI for Angular Sass 프레임워크의 모든 강력한 도구에 접근할 수 있습니다:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Include the styles
오류 색상을 변경하려면 css 변수--igx-error-500를 사용할 수 있습니다:
--igx-error-500: 34, 80%, 63%;
Custom Templates
기본 오류 템플릿을 변경하면 사용자 정의 클래스와 스타일을 설정할 수 있습니다.
<ng-template igxCellValidationError let-cell='cell' let-defaultErr='defaultErrorTemplate'>
<div class="validator-container">
<ng-container *ngTemplateOutlet="defaultErr">
</ng-container>
</div>
</ng-template>
Invalid row and cell styles
행과 셀은 개발자가 행이나 셀이 유효하지 않은지, 어떤 종류의 오류가 활성화되어 있는지 알 수 있는 API를 제공합니다.
public rowStyles = {
background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000'
};
public cellStyles = {
'invalid-cell': (rowData, columnKey) => {
let cell = this.hierarchicalGrid.getCellByKey(rowData, columnKey);
// search in child grids
if (!cell) {
for (let grid of this.childGrid.gridAPI.getChildGrids()) {
cell = grid.getCellByKey(rowData, columnKey);
if (cell) break;
}
}
return cell && cell.validation.status === 'INVALID';
}
}
<igx-hierarchical-grid [rowStyles]="rowStyles">
<igx-column field="Artist" [editable]="true" [dataType]="'string'" required [cellClasses]="cellStyles">
...
<igx-row-island [key]="'Albums'" [rowStyles]="rowStyles">
<igx-column field="Album" [editable]="true" [dataType]="'string'" required [cellClasses]="cellStyles">
Demo
API References
Known Issues and Limitations
| 한정 | 설명 |
|---|---|
언제validationTrigger 흐릿하다,editValue 유효성 검사는 편집기가 흐려진 후에만 실행됩니다. |
이유는 이것이 formControl의updateOn 재산. 이는 formControl이 관련 유효성 검사기를 업데이트하고 트리거하는 이벤트를 결정합니다. |
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub