Merge pull request #7 from Infrastructure/feature/form

fix: fix validator in input-number and switch and add some code demo
This commit is contained in:
jintao-gan 2019-08-07 15:20:55 +08:00 committed by GitHub Enterprise
commit 1a4ef23d07
4 changed files with 87 additions and 8 deletions

View File

@ -271,6 +271,7 @@
ref="form-validate"
:model="validateForm"
:rules="validateRules"
:label-width="100"
>
<n-form-item
label="Warning"
@ -296,6 +297,15 @@
</template>
<span>Test nesting formItem in resetForm</span>
</n-popover>
<n-form-item
prop="inputNumber"
label="InputNumber"
>
<n-input-number
v-model="validateForm.inputNumber"
placeholder="n-input-number"
/>
</n-form-item>
<n-form-item
prop="muti.deep.select"
label="Select"
@ -365,6 +375,15 @@
<n-form-item prop="input" label="Input">
<n-input v-model="validateForm.input" placeholder="Enter string" />
</n-form-item>
<n-form-item
prop="inputNumber"
label="InputNumber"
>
<n-input-number
v-model="validateForm.inputNumber"
placeholder="n-input-number"
/>
</n-form-item>
<n-form-item prop="muti.deep.select" label="Select">
<n-select
size="small"
@ -419,9 +438,22 @@
callback()
}
}
var inputNumberValidate = (rule, value, callback) => {
console.log('blur', value)
callback()
}
var inputNumberValidateChange = (rule, value, callback) => {
console.log('change', value)
callback()
}
var switchValidate = (rule, value, callback) => {
console.log('switch change', value)
callback()
}
return {
validateForm: {
input: "",
inputNumber: undefined,
muti: {
deep: {
select: ""
@ -432,6 +464,14 @@
radio: ""
},
validateRules: {
switch: [
{ validator: switchValidate, trigger: 'change' }
],
inputNumber: [
{ required: true, message: 'input cannot be empty', trigger: 'blur' },
{ validator: inputNumberValidate, trigger: 'blur' },
{ validator: inputNumberValidateChange, trigger: 'change' }
],
input: [
{ required: true, message: "input cannot be empty", trigger: "blur" }
],
@ -747,6 +787,18 @@ export default {
callback()
}
}
var inputNumberValidate = (rule, value, callback) => {
console.log('blur', value)
callback()
}
var inputNumberValidateChange = (rule, value, callback) => {
console.log('change', value)
callback()
}
var switchValidate = (rule, value, callback) => {
console.log('switch change', value)
callback()
}
return {
form: {
name: '',
@ -779,6 +831,7 @@ export default {
],
validateForm: {
input: '',
inputNumber: undefined,
muti: {
deep: {
select: 'Public'
@ -792,6 +845,14 @@ export default {
radio: ''
},
validateRules: {
switch: [
{ validator: switchValidate, trigger: 'change' }
],
inputNumber: [
{ type: 'number', required: true, message: 'input cannot be empty', trigger: 'blur' },
{ validator: inputNumberValidate, trigger: 'blur' },
{ validator: inputNumberValidateChange, trigger: 'change' }
],
input: [
{ required: true, message: 'input cannot be empty', trigger: 'blur' }
],

View File

@ -75,9 +75,6 @@ export default {
},
mixins: [ Emitter ],
inject: {
form: {
default: null
},
formItem: {
default: null
}
@ -129,11 +126,6 @@ export default {
isComposing: false
}
},
computed: {
validateState () {
return this.formItem ? this.formItem.validateState : ''
}
},
methods: {
handleCompositionStart () {
this.isComposing = true

View File

@ -40,6 +40,7 @@
<script>
import NIcon from '../../Icon/index'
import Emitter from '../../../mixins/emitter'
const DEFAULT_STEP = 1
@ -61,6 +62,12 @@ export default {
components: {
NIcon
},
mixins: [ Emitter ],
inject: {
formItem: {
default: null
}
},
props: {
value: {
type: Number,
@ -124,6 +131,7 @@ export default {
}
}
this.$emit('change', newValue, oldValue)
this.formBlur('change', newValue)
/**
* newValue === oldValue won't trigger watcher!
* so the call stack won't fall in loop
@ -141,6 +149,11 @@ export default {
}
},
methods: {
formBlur (type, val) {
if (this.formItem) {
this.dispatch('NFormItem', 'on-form-' + type, val)
}
},
add () {
if (this.value === null) {
this.$emit('input', this.aValidValue)
@ -161,6 +174,7 @@ export default {
const value = e.target.value
if (value === '') {
this.$emit('input', null)
this.formBlur('blur', value)
return
}
const parsedNumber = Number(value)
@ -170,6 +184,7 @@ export default {
const valueAfterChange = parsedNumber
this.$emit('input', valueAfterChange)
}
this.formBlur('blur', parsedNumber)
}
}
}

View File

@ -11,8 +11,16 @@
</template>
<script>
import Emitter from '../../../mixins/emitter'
export default {
name: 'NSwitch',
mixins: [ Emitter ],
inject: {
formItem: {
default: null
}
},
model: {
prop: 'active',
event: 'change'
@ -31,6 +39,9 @@ export default {
handleClick () {
if (!this.disabled) {
this.$emit('change', !this.active)
if (this.formItem) {
this.dispatch('NFormItem', 'on-form-change', !this.active)
}
}
}
}