Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Ba617809127d7a39e59aeb3124974165?s=128

Hiroshi Oda

July 12, 2017
Tweet

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