@@ -9,19 +9,70 @@ Horizontal login form is often used in navigation bar.
99</us >
1010
1111
12- <script >
13- import { Form } from ' vue-antd-ui'
12+ <template >
13+ <a-form layout =' inline' @submit =" handleSubmit" :autoFormCreate =" (form)=>{this.form = form}"
14+ <template v-if =" form " >
15+ <a-form-item
16+ :validateStatus =" userNameError() ? 'error' : ''"
17+ :help =" userNameError() || ''"
18+ fieldDecoratorId =" userName"
19+ :fieldDecoratorOptions =" {rules: [{ required: true, message: 'Please input your username!' }]}"
20+ >
21+ <a-input placeholder =' Username'
22+ <a-icon slot =" prefix" type =' user' style =" color rgba (0 ,0 ,0 ,.25 )"
23+ </a-input >
24+ </a-form-item >
25+ <a-form-item
26+ :validateStatus =" passwordError() ? 'error' : ''"
27+ :help =" passwordError() || ''"
28+ fieldDecoratorId =" password"
29+ :fieldDecoratorOptions =" {rules: [{ required: true, message: 'Please input your Password!' }]}"
30+ >
31+ <a-input type =' password' placeholder =' Password'
32+ <a-icon slot =" prefix" type =' lock' style =" color rgba (0 ,0 ,0 ,.25 )"
33+ </a-input >
34+ </a-form-item >
35+ <a-form-item >
36+ <a-button
37+ type =' primary'
38+ htmlType =' submit'
39+ :disabled =" hasErrors(form.getFieldsError())"
40+ >
41+ Log in
42+ </a-button >
43+ </a-form-item >
44+ </template >
45+ </a-form >
46+ </template >
1447
48+ <script >
1549function hasErrors (fieldsError ) {
1650 return Object .keys (fieldsError).some (field => fieldsError[field])
1751}
18-
19- const HorizontalLoginForm = {
52+ export default {
53+ data () {
54+ return {
55+ hasErrors,
56+ form: null ,
57+ }
58+ },
2059 mounted () {
21- // To disabled submit button at the beginning.
22- this .form .validateFields ()
60+ this .$nextTick (() => {
61+ // To disabled submit button at the beginning.
62+ this .form .validateFields ()
63+ })
2364 },
2465 methods: {
66+ // Only show error after a field is touched.
67+ userNameError () {
68+ const { getFieldError , isFieldTouched } = this .form
69+ return isFieldTouched (' userName' && getFieldError (' userName'
70+ },
71+ // Only show error after a field is touched.
72+ passwordError () {
73+ const { getFieldError , isFieldTouched } = this .form
74+ return isFieldTouched (' password' && getFieldError (' password'
75+ },
2576 handleSubmit (e ) {
2677 e .preventDefault ()
2778 this .form .validateFields ((err , values ) => {
@@ -31,52 +82,10 @@ const HorizontalLoginForm = {
3182 })
3283 },
3384 },
34-
35- render () {
36- const { getFieldDecorator , getFieldsError , getFieldError , isFieldTouched } = this .form
37-
38- // Only show error after a field is touched.
39- const userNameError = isFieldTouched (' userName' && getFieldError (' userName'
40- const passwordError = isFieldTouched (' password' && getFieldError (' password'
41- return (
42- < a- form layout= ' inline' = {this .handleSubmit }>
43- < a- form- item
44- validateStatus= {userNameError ? ' error' : ' '
45- help= {userNameError || ' '
46- >
47- {getFieldDecorator (' userName'
48- rules: [{ required: true , message: ' Please input your username!'
49- })(
50- < a- input prefix= {< a- icon type= ' user' = {{ color: ' rgba(0,0,0,.25)' / > } placeholder= ' Username' / >
51- )}
52- < / a- form- item>
53- < a- form- item
54- validateStatus= {passwordError ? ' error' : ' '
55- help= {passwordError || ' '
56- >
57- {getFieldDecorator (' password'
58- rules: [{ required: true , message: ' Please input your Password!'
59- })(
60- < a- input prefix= {< a- icon type= ' lock' = {{ color: ' rgba(0,0,0,.25)' / > } type= ' password' = ' Password' / >
61- )}
62- < / a- form- item>
63- < a- form- item>
64- < a- button
65- type= ' primary'
66- htmlType= ' submit'
67- disabled= {hasErrors (getFieldsError ())}
68- >
69- Log in
70- < / a- button>
71- < / a- form- item>
72- < / a- form>
73- )
74- },
7585}
76-
77- export default Form .create ()(HorizontalLoginForm)
7886script >
7987
8088
8189
8290
91+
0 commit comments