Angular 그리드 편집 및 검증
그리드의 편집은 셀/행을 편집할 때 사용자 입력에 대한 내장된 검증 메커니즘을 노출합니다. 잘 알려진 기능과 더 쉽게 통합할 수 있도록 Angular Form 검증 기능을 확장합니다. 편집기 상태가 변경되면 편집된 셀에 시각적 표시기가 적용됩니다.
구성
Configure via template-driven configuration
우리는 일부 Angular 폼 검증자 지침을 확장하여 직접 작업IgxColumn 할 수 있도록 합니다. 동일한 검증자들이 선언적으로igx-column 설정될 수 있는 속성으로도 제공됩니다. 다음 검증자들은 기본 사양으로 지원됩니다:
- 필수의
- 분
- 최대
- 이메일
- 최소 길이
- 최대 길이
- 무늬
열 입력이 설정되고 값이 이메일 형식으로 지정되는지 확인하려면 관련 지시문을 사용할 수 있습니다.
<igx-column [field]="email" [header]="User E-mail" required email></igx-column>
다음 샘플은 그리드에서 사전 구축requiredemail 된 명령어와min 검증자 지침을 사용하는 방법을 보여줍니다.
Configure via reactive forms
이벤트를 통해FormGroup 행/셀에서 편집이 시작될 때 검증에 사용될 'that'formGroupCreated을 공개합니다. 관련 필드에 대해 자신만의 검증기를 추가하여 수정할 수 있습니다:
<igx-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 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-grid (cellEdit)='cellEdit($event)' ...>
public cellEdit(evt) {
if (!evt.valid) {
evt.cancel = true;
}
}
Example
아래 예에서는 위에서 언급한 사용자 정의 옵션을 보여줍니다.
Cross-field validation
일부 상황에서는 한 필드의 검증이 레코드 내 다른 필드의 값에 의존할 수 있습니다. 이 경우 커스텀 검증기를 사용해 레코드 내 값을FormGroup 공유하는 값을 비교할 수 있습니다.
아래 샘플은 동일한 레코드의 서로 다른 필드 간의 필드 간 유효성 검사를 보여줍니다. 현재 날짜와 비교하여 날짜 유효성을 확인하고 기록 날짜의 활성 날짜와 생성 날짜 사이의 날짜 유효성과 각 직원의 거래 성패 비율을 확인합니다. 모든 오류는 레코드가 유효하지 않음을 보여주고 관련 오류를 표시하는 별도의 고정 열에 수집됩니다.
다음 코드 줄은 비교를 포함하고 그에 관련된 관련 오류를 설정하는 교차 필드 유효성 검사 기능을 보여줍니다.
private rowValidator(): ValidatorFn {
return (formGroup: FormGroup): ValidationErrors | null => {
let returnObject = {};
const createdOnRecord = formGroup.get('created_on');
const lastActiveRecord = formGroup.get('last_activity');
const winControl = formGroup.get('deals_won');
const loseControl = formGroup.get('deals_lost');
const actualSalesControl = formGroup.get('actual_sales');
// Validate dates
const curDate = new Date();
if (new Date(createdOnRecord.value) > curDate) {
// The created on date shouldn't be greater than current date.
returnObject['createdInvalid'] = true;
}
if (new Date(lastActiveRecord.value) > curDate) {
// The last active date shouldn't be greater than current date.
returnObject['lastActiveInvalid'] = true;
}
if (new Date(createdOnRecord.value) > new Date(lastActiveRecord.value)) {
// The created on date shouldn't be greater than last active date.
returnObject['createdLastActiveInvalid'] = true;
}
// Validate deals
const dealsRatio = this.calculateDealsRatio(winControl.value, loseControl.value);
if (actualSalesControl.value === 0 && dealsRatio > 0) {
// If the actual sales value is 0 but there are deals made.
returnObject['salesZero'] = true;
}
if (actualSalesControl.value > 0 && dealsRatio === 0) {
// If the deals ratio based on deals won is 0 but the actual sales is bigger than 0.
returnObject['salesNotZero'] = true;
}
return returnObject;
};
}
public calculateDealsRatio(dealsWon, dealsLost) {
if (dealsLost === 0) return dealsWon + 1;
return Math.round(dealsWon / dealsLost * 100) / 100;
}
교차 필드 검증기는 다음 조건에 추가할 수 있습니다.formGroup 행의formGroupCreated 새로운 것을 반환하는 이벤트입니다.formGroup 편집 모드에 들어갈 때 각 행에 대해:
<igx-grid #grid1 [data]="transactionData" [width]="'100%'" [height]="'480px'" [autoGenerate]="false"
[batchEditing]="true" [rowEditable]="true" [primaryKey]="'id'"
(formGroupCreated)='formCreateHandler($event)'>
<!-- ... -->
</igx-grid>
public formCreateHandler(evt: IGridFormGroupCreatedEventArgs) {
evt.formGroup.addValidators(this.rowValidator());
}
다양한 오류는 모든 오류를 단일 도구 설명에 결합하는 템플릿 셀에 표시됩니다. 행의 유효한 상태에 따라 다른 아이콘이 표시됩니다.
<igx-column field="row_valid" header=" " [editable]="false" [pinned]="true" [width]="'50px'">
<ng-template igxCell let-cell="cell">
<div *ngIf="isRowValid(cell)" [igxTooltipTarget]="tooltipRef" style="margin-right: '-10px';">
<img width="18" src="assets/images/grid/active.png"/>
</div>
<div *ngIf="!isRowValid(cell)" [igxTooltipTarget]="tooltipRef" style="margin-right: '-10px';">
<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>
오류 메시지는 함수에stateMessage 수집되며, 각 컬럼은 템플릿화된 폼 검증을 가질 수 있고, 사용자 정의rowValidator에서 온 행 자체의 오류를 확인할 수 있기 때문입니다.
public stateMessage(cell: CellType) {
const messages = [];
const row = cell.row;
const cellValidationErrors = row.cells.filter(x => !!x.validation.errors);
cellValidationErrors.forEach(cell => {
if (cell.validation.errors) {
if (cell.validation.errors.required) {
messages.push(`The \`${cell.column.header}\` column is required.`);
}
// Other cell errors ...
}
});
if (row.validation.errors?.createdInvalid) {
messages.push(`The \`Date of Registration\` date cannot be in the future.`);
}
// Other cross-field errors...
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) => {
const pKey = this.grid.primaryKey;
const cell = this.grid.getCellByKey(rowData[pKey], columnKey);
return cell && cell.validation.status === 'INVALID';
}
}
<igx-grid [rowStyles]="rowStyles">
<igx-column field="ReorderLevel" header="ReorderLever" required [cellClasses]="cellStyles">
Demo
API References
Known Issues and Limitations
| 한정 | 설명 |
|---|---|
언제validationTrigger 흐릿하다,editValue 유효성 검사는 편집기가 흐려진 후에만 실행됩니다. |
이유는 이것이 formControl의updateOn 재산. 이는 formControl이 관련 유효성 검사기를 업데이트하고 트리거하는 이벤트를 결정합니다. |
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub