ValidationMessageをいい感じにしようとした話

Angular入門者向けLT会 #4のLT資料です

Transcript

1. ValidationMessageΛ ͍͍ײ͡ʹ͠Α͏ͱͨ͠࿩ Angularೖ໳ऀ޲͚LTձ #4 2017-7-12(Wed) খాത࢘@hi1280
2. ϓϩϑΟʔϧ • SE • Certified ScrumMaster • Javaग़਎ • Angularྺ൒೥
3. Ϟνϕʔγϣϯ • ۀ຿γεςϜΛߟ͑ΔͱɺೖྗϑΥʔϜʹ ؾΛ࢖͏ • ೖྗΤϥʔϝοηʔδͷදࣔʹखؒΛ͔͚ ͨ͘ͳ͍
4. AngularͷυΩϡϝϯτͰ͸ɺ ϝοηʔδ͕ϕλॻ͖ validationMessages = { 'name': { 'required': 'Name is required.', 'minlength': 'Name must be at least 4 characters long.', 'maxlength': 'Name cannot be more than 24 characters long.', 'forbiddenName': 'Someone named "Bob" cannot be a hero.' }, 'power': { 'required': 'Power is required.' } }; ࢀߟɿhttps://angular.io/guide/form-validation
5. AngularͷValidation࣮૷ export class Validators { … static required(control: AbstractControl): ValidationErrors|null { return isEmptyInputValue(control.value) ? {'required': true} : null; } … Angularͷίʔυ͔Βൈਮ
6. AngularͷValidation࣮૷ export class Validators { … static required(control: AbstractControl): ValidationErrors|null { return isEmptyInputValue(control.value) ? {'required': true} : null; } … Angularͷίʔυ͔Βൈਮ Messageʹؔ͢Δ৘ใΛ࣋ͬͯͳ͍
7. ཧ૝ͷΠϝʔδ JavaͷBean Validation࢓༷ • Message using parameters Value must be between {min} and {max} • Message interpolation @Size(min=5, max=15, message="Key must have \\{{min}\\} \\ \\{{max}\\} characters")
8. ΍ͬͯΈͨ • Message using parameters ValidationMessageModule.configure({ messages: {between: "Value must be between {min} and {max}"} }) NgModuleΛ༻ҙͯ͠ɺϝοηʔδΛઃఆ
9. ΍ͬͯΈͨ • Message interpolation config = { "name": { required: { name: "Name" }, minlength: { name: "Name", min: "4" } }, "power": { required: { name: "Power" } } }; ϝοηʔδͷύϥϝʔλ͚ͩࢦఆ
10. ΍ͬͯΈͨ • Message interpolation config = { "name": { required: { message: "Name is invalid." } } }; ϝοηʔδ·Δ͝ͱͷࢦఆ΋Մೳ
11. ֶΜͩ͜ͱ • NgModuleͷ࡞Γํ • Angular্ͰDIର৅ͱ͢ΔΫϥεͷ࡞Γํ • DIର৅ΫϥεͷઃఆΛม͑Δํ๏(RouterModuleͰ࢖ΘΕ͍ͯΔ) • NgModuleͷnpmެ։ํ๏ • https://www.npmjs.com/package/ngx-validation- messages
12. ϑΟʔυόοΫ͓଴͍ͪͯ͠·͢ https://github.com/hi1280/ngx-validation-messages