驗(yàn)證

立即下載Kendo UI for Angular

Kendo UI for Angular條形碼包含一個(gè)內(nèi)置的所有條形碼類型的驗(yàn)證器。

下面的示例演示了實(shí)際的條形碼驗(yàn)證器。

例如：

修改或清除該值來查看驗(yàn)證錯(cuò)誤：123456789012

查看源代碼：

app.component.ts：

import { Component } from '@angular/core';
import { AbstractControl, FormBuilder, Validators } from '@angular/forms';
import { createBarcodeValidator } from '@progress/kendo-angular-barcodes';

@Component({
selector: 'my-app',
template: `
<div class="example-config" [formGroup]="options">
<div class="field">
<label [for]="valueInput">Modify or clear the value to see the validation error:</label>
<div>
<kendo-textbox #valueInput formControlName="value" [style.width.px]="200">
</kendo-textbox>

<div *ngIf="value.invalid" class="k-form-error">
<div *ngIf="value.errors?.required">
Value is required.
</div>
<div *ngIf="value.errors?.barcode">
{{ value.errors?.barcode.message }}
</div>
</div>
</div>
</div>
</div>

<div style="width: 20%;">
<kendo-barcode *ngIf="options.valid"
[type]="type" [value]="options.value.value"
[checksum]="true"></kendo-barcode>
</div>
`
})
export class AppComponent {
public readonly type = 'EAN13';

public options = this.fb.group({
value: ['123456789012', Validators.compose([
Validators.required,
createBarcodeValidator(this.type)
])]
});

public get value(): AbstractControl {
return this.options.controls['value'];
}

constructor(private fb: FormBuilder) {
}
}

app.module.ts:

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { BarcodesModule } from '@progress/kendo-angular-barcodes';
import { LabelModule } from '@progress/kendo-angular-label';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BarcodesModule, InputsModule, LabelModule, ReactiveFormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts:

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);