Stencil: Feature Request: Prop default value & validation & required

Created on 11 Oct 2017  路  3Comments  路  Source: ionic-team/stencil

Prop should have the same propeties that props in vue has
type (already have)
required
default (should be callback)
validation

Most helpful comment

All of this is already within stencil :)

default values

@Component({ tag: 'x-greet' })
class Hello {
  @Prop() who = 'World'
  render(){  return <div>Hello  {this.who} !</div>
}
<x-greet></x-greet>

will render -> <x-greet><div>Hello World !</div></x-greet>

required / validations

@Component({ tag: 'x-greet' })
class Hello {
  @Prop() who: string
  @PropWillChange('who')
  validateWho(newValue: string) {
    const isBlank = typeof newValue == null
    const atLeast2chars = typeof newValue === 'string' && newValue.length >= 2
    if (isBlank){ throw new Error('who: required') } 
    if ( !atLeast2chars ) { throw new Error('who: atLeast2chars')  }
  }
}

also I would definitely enable those validations only for Development env

All 3 comments

All of this is already within stencil :)

default values

@Component({ tag: 'x-greet' })
class Hello {
  @Prop() who = 'World'
  render(){  return <div>Hello  {this.who} !</div>
}
<x-greet></x-greet>

will render -> <x-greet><div>Hello World !</div></x-greet>

required / validations

@Component({ tag: 'x-greet' })
class Hello {
  @Prop() who: string
  @PropWillChange('who')
  validateWho(newValue: string) {
    const isBlank = typeof newValue == null
    const atLeast2chars = typeof newValue === 'string' && newValue.length >= 2
    if (isBlank){ throw new Error('who: required') } 
    if ( !atLeast2chars ) { throw new Error('who: atLeast2chars')  }
  }
}

also I would definitely enable those validations only for Development env

Right, thanks @Hotell!

Reminds me to add this to the docs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

romulocintra picture romulocintra  路  3Comments

MrMcGibblets picture MrMcGibblets  路  3Comments

glemiere picture glemiere  路  3Comments

kensodemann picture kensodemann  路  3Comments

cjorasch picture cjorasch  路  3Comments