検証

CollectionViewには、検証サポートを提供するgetErrorプロパティがあります。項目が編集されたときにカスタム関数を使用して独自の検証を実行できます。このサンプルはgetErrorプロパティ関数を使用して、特定の国と正数のみをコミットできるようにします。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; import { countries, getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a CollectionView let view = new wijmo.CollectionView(getData(), { sortDescriptions: ['country'], getError: (item, propName) => { switch (propName) { case 'country': return countries.indexOf(item.country) < 0 ? '無効な国です。' : ''; case 'downloads': case 'sales': case 'expenses': return item[propName] < 0 ? '負の値を入力できません。' : ''; case 'active': return item.active && item.country.match(/^(アメリカ|イギリス)$/) ? 'アメリカとイギリスでは有効にできません。' : ''; } // return null; } }); // // create grid for editing with validation let theGrid = new grid.FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'country', header: '国' }, { binding: 'downloads', header: 'DL数', width: 80 }, { binding: 'sales', header: '売上', width: 80 }, { binding: 'expenses', header: '費用', width: 80 }, { binding: 'active', header: '有効' }, ], itemsSource: view }); // // use getError to provide form validation let theItem = {}; // document.getElementById('theForm').addEventListener('input', e => { let input = e.target; let propName = input.id; // theItem[propName] = input.value; input.setCustomValidity(view.getError(theItem, propName)); }); // document.getElementById('theForm').addEventListener('submit', e => e.preventDefault()); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <h2> FlexGridの検証 </h2> <p> <b>FlexGrid</b>は、デフォルトで<b>CollectionView.getError</b>プロパティを使用します。無効な国または負の数値を入力して、グリッドがエラーをどのように識別し、無効なエントリがコミットされないかを確認してください。</p> <div id="theGrid"> </div> <h2> フォームの検証 </h2> <p> <b>CollectionView.getError</b>プロパティを使用してフォームを検証することもできます。HTML5検証APIの一部である<b>setCustomValidity</b>メソッドを使用して、関数を呼び出して適切な入力要素に結果を適用するだけです。 </p> <form id="theForm" class="form-inline"> <div class="form-group"> <label for="country">国</label> <input id="country" type="text" class="form-control" required value="アメリカ"> </div> <div class="form-group"> <label for="downloads">DL数</label> <input id="downloads" type="number" class="form-control" required value="123"> </div> <div class="form-group"> <label for="sales">売上</label> <input id="sales" type="number" class="form-control" required value="123"> </div> <button type="submit" class="btn btn-primary">送信</button> </form> </div> </body> </html> // export const countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ', 'スペイン', 'ポルトガル', 'オーストラリア']; // export function getData() { // create some random data let data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 4 == 0 }); } // return data; } .form-group { margin-right: 8px; } .form-group > label { margin-right: 3px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { DataService, countries, TDataItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { view: wijmo.CollectionView; theItem: TDataItem = <any>{}; // constructor(@Inject(DataService) private dataService: DataService) { this.view = new wijmo.CollectionView(dataService.getData(), { sortDescriptions: ['country'], getError: (item: TDataItem, propName: string) => { switch (propName) { case 'country': return countries.indexOf(item.country) < 0 ? '無効な国です。' : ''; case 'downloads': case 'sales': case 'expenses': return item[propName] < 0 ? '負の値を入力できません。' : ''; case 'active': return item.active && item.country.match(/^(アメリカ|イギリス)$/) ? 'アメリカとイギリスでは有効にできません。' : ''; } // return null; } }); } // validateForm(input: HTMLInputElement) { let propName = input.id; // this.theItem[propName] = input.value; input.setCustomValidity(this.view.getError(this.theItem, propName)); } } // @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <h2> FlexGridの検証 </h2> <p> <b>FlexGrid</b>は、デフォルトで<b>CollectionView.getError</b>プロパティを使用します。無効な国または負の数値を入力して、グリッドがエラーをどのように識別し、無効なエントリがコミットされないかを確認してください。 </p> <wj-flex-grid [itemsSource]="view"> <wj-flex-grid-column binding="country" header="国"></wj-flex-grid-column> <wj-flex-grid-column binding="downloads" header="DL数" [width]="80"></wj-flex-grid-column> <wj-flex-grid-column binding="sales" header="売上" [width]="80"></wj-flex-grid-column> <wj-flex-grid-column binding="expenses" header="費用" [width]="80"></wj-flex-grid-column> <wj-flex-grid-column binding="active" header="有効"></wj-flex-grid-column> </wj-flex-grid> <h2> フォームの検証 </h2> <p> <b>CollectionView.getError</b>プロパティを使用してフォームを検証することもできます。HTML5検証APIの一部である<b>setCustomValidity</b>メソッドを使用して、関数を呼び出して適切な入力要素に結果を適用するだけです。 </p> <form id="theForm" class="form-inline" (input)="validateForm($event.target)" (submit)="$event.preventDefault()"> <div class="form-group"> <label for="country">国</label> <input id="country" type="text" class="form-control" required value="アメリカ"> </div> <div class="form-group"> <label for="downloads">DL数</label> <input id="downloads" type="number" class="form-control" required value="123"> </div> <div class="form-group"> <label for="sales">売上</label> <input id="sales" type="number" class="form-control" required value="123"> </div> <button type="submit" class="btn btn-primary">送信</button> </form> </div> import { Injectable } from '@angular/core'; // export type TDataItem = { country: string; downloads: number; sales: number; expenses: number; active: boolean; } // export const countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ', 'スペイン', 'ポルトガル', 'オーストラリア']; // @Injectable() export class DataService { getData() { // create some random data let data: TDataItem[] = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 4 == 0 }); } // return data; } } .form-group { margin-right: 8px; } .form-group > label { margin-right: 3px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wijmo from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import { getData, countries } from './data'; class App extends React.Component { constructor(props) { super(props); this._theItem = {}; this._validateForm = (input) => { let propName = input.id, value = input.value; this._theItem[propName] = value; input.setCustomValidity(this._view.getError(this._theItem, propName)); }; this._view = new wijmo.CollectionView(getData(), { sortDescriptions: ['country'], getError: (item, propName) => { switch (propName) { case 'country': return countries.indexOf(item.country) < 0 ? '無効な国です。' : ''; case 'downloads': case 'sales': case 'expenses': return item[propName] < 0 ? '負の値を入力できません。' : ''; case 'active': return item.active && item.country.match(/^(アメリカ|イギリス)$/) ? 'アメリカとイギリスでは有効にできません。' : ''; } return null; } }); } render() { return <div className="container-fluid"> <h2>FlexGridの検証</h2> <p> <b>FlexGrid</b>は、デフォルトで<b>CollectionView.getError</b>プロパティを使用します。無効な国または負の数値を入力して、グリッドがエラーをどのように識別し、無効なエントリがコミットされないかを確認してください。 </p> <wjGrid.FlexGrid itemsSource={this._view}> <wjGrid.FlexGridColumn binding="country" header="国"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="downloads" header="DL数" width={80}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="sales" header="売上" width={80}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="expenses" header="費用" width={80}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="active" header="有効"></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> <h2>フォームの検証</h2> <p> <b>CollectionView.getError</b>プロパティを使用してフォームを検証することもできます。HTML5検証APIの一部である<b>setCustomValidity</b>メソッドを使用して、関数を呼び出して適切な入力要素に結果を適用するだけです。 </p> <form id="theForm" className="form-inline" onInput={e => this._validateForm(e.target)} onSubmit={e => e.preventDefault()}> <div className="form-group"> <label htmlFor="country">国</label> <input id="country" type="text" className="form-control" required defaultValue="アメリカ"/> </div> <div className="form-group"> <label htmlFor="downloads">DL数</label> <input id="downloads" type="number" className="form-control" required defaultValue="123"/> </div> <div className="form-group"> <label htmlFor="sales">売上</label> <input id="sales" type="number" className="form-control" required defaultValue="123"/> </div> <button type="submit" className="btn btn-primary">送信</button> </form> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .form-group { margin-right: 8px; } .form-group > label { margin-right: 3px; } export const countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ', 'スペイン', 'ポルトガル', 'オーストラリア']; export function getData() { // create some random data let data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 4 == 0 }); } // return data; } <template> <div class="container-fluid"> <h2>FlexGridの検証</h2> <p> <b>FlexGrid</b>は、デフォルトで<b>CollectionView.getError</b>プロパティを使用します。無効な国または負の数値を入力して、グリッドがエラーをどのように識別し、無効なエントリがコミットされないかを確認してください。 </p> <wj-flex-grid :itemsSource="view"> <wj-flex-grid-column binding="country" header="国"></wj-flex-grid-column> <wj-flex-grid-column binding="downloads" header="DL数" :width=80></wj-flex-grid-column> <wj-flex-grid-column binding="sales" header="売上" :width=80></wj-flex-grid-column> <wj-flex-grid-column binding="expenses" header="費用" :width=80></wj-flex-grid-column> <wj-flex-grid-column binding="active" header="有効"></wj-flex-grid-column> </wj-flex-grid> <h2>フォームの検証</h2> <p> <b>CollectionView.getError</b>プロパティを使用してフォームを検証することもできます。HTML5検証APIの一部である<b>setCustomValidity</b>メソッドを使用して、関数を呼び出して適切な入力要素に結果を適用するだけです。 </p> <form id="theForm" class="form-inline" @input="validateForm($event.target)" @submit="$event.preventDefault()"> <div class="form-group"> <label for="country">国</label> <input id="country" type="text" class="form-control" required value="US"> </div> <div class="form-group"> <label for="downloads">DL数</label> <input id="downloads" type="number" class="form-control" required value="123"> </div> <div class="form-group"> <label for="sales">売上</label> <input id="sales" type="number" class="form-control" required value="123"> </div> <button type="submit" class="btn btn-primary">送信</button> </form> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import * as wijmo from "@grapecity/wijmo"; import { getData, countries } from "./data"; let App = Vue.extend({ name: "app", data: function() { return { theItem: {}, view: new wijmo.CollectionView(getData(), { sortDescriptions: ["country"], getError: (item, propName) => { switch (propName) { case "country": return countries.indexOf(item.country) < 0 ? "無効な国です。" : ""; case "downloads": case "sales": case "expenses": return item[propName] < 0 ? "負の値を入力できません。" : ""; case "active": return item.active && item.country.match(/^(アメリカ|イギリス)$/) ? "アメリカとイギリスでは有効にできません。" : ""; } return null; } }) }; }, methods: { validateForm: function(input) { let propName = input.id; // this.theItem[propName] = input.value; input.setCustomValidity(this.view.getError(this.theItem, propName)); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { let data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 4 == 0 }); } // return data; } export const countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ', 'スペイン', 'ポルトガル', 'オーストラリア'];