README

Laravel表单助手；使用单个流畅且完全可自定义的定义自动生成AJAX表单、验证等。

安装

使用composer安装：composer require plokko/form-helper

要使用Vue组件，在主app.js文件中直接引用它

//...
Vue.component('form-helper', require('../../vendor/plokko/form-helper/resources/components/FormHelper').default);

或引用已发布的组件

使用php artisan vendor:publish --provider="Plokko\FormHelper\FormHelperServiceProvider" --tag=components发布Vue组件，然后将其添加到app.js文件中

//...
Vue.component('form-helper', require('./vendor/plokko/form-helper/FormHelper').default);

使用方法

在控制器中定义您的表单

//...
use Plokko\FormHelper\FormHelper;

class TestController extends Controller
{
    //...
    public function example(Request $request){
        $form = new FormHelper();
        //Just an example model as data source
        $data = User::first();
        
        $form
            // Fill field values
            ->fill($data)
            // Specify form action and method
            ->action(route('users.edit',1),'patch')

            // Field definition:
            ->field('name')
                ->required(true)
                ->min(3)
                ->label('User name')
                //All the field with a prepending ":" will be evaluated as Javascript, usefull for defining functions
                ->attr(':rule','[v=>!!v || "Campo richiesto",v=> (!!v && v.length>=3)|| "Lunghezza minima 3ch"]')
            
            ->field('email')
                ->type('email')
                ->label('E-mail')
                ->required(true)

            ->field('password')
                ->type('password')
                ->label('Password')
                ->attr('min',3)

            ->field('filetest')
                ->type('file')
                ->label('File upload')
            
            //Redefine all the field labels using the specified translation array;
            // for example the trans id "users.fields.name" will be assigned as a label to "name"
            ->labelsFromTrans('users.fields')
            ;

        return view('your.blade.file',compact('form'));
    }
}

然后在blade文件中使用定义的表单

    <!-- Renders the form-->
    {{ $form->render() }}
    
    <!-- Render the form component; same as before but allows customization -->
    <form-helper 
        {{ $form->renderFormAttr() }} 
        @submit="onSubmit"
        @error="onError" 
        >
        @verbatim
            <!-- Custom slot for a single field (by field name) -->
            <template v-slot:field.email="{field,item}">
                <label for="customfield">{{field.label}}</label>
                <input 
                    type="email" 
                    v-model="item.value" 
                    :name="field.name" 
                    id="customfield"
                    />
            </template>
           
            <!-- Custom slot for field type -->
            <template v-slot:type.file="{field,item}">
                <label>{{field.label}}
                    <input 
                        type="file" 
                        @change="item.onFileChange"
                        v-bind="field"
                        />
                </label>
            </template>
        @endverbatim
    </form-helper>
    

有关更多信息，请继续访问wiki