README

这是一个用于在 Laravel 5/6 中创建 Bootstrap 4 风格表单元素的包。

特性

• 标签
• 错误信息
• Bootstrap 4 标记和类（包括状态、颜色和大小）
• 错误验证信息
• 表单填充（使用模型实例、数组或在提交表单后发生验证错误时）
• 国际化
• 使用 PHP 连接方法添加参数
• 无依赖（无 Laravel Collective 依赖）

简介

之前

<div class="form-group">
    <label for="username">Username</label>
    <input
        type="text"
        class="form-control @if($errors->has('username')) is-invalid @endif "
        id="username"
        value="{{old('username', $username)}}"
    />
    @if($errors->has('username'))
    <div class="invalid-feedback">{{$errors->first('username')}}</div>
    @endif
</div>

之后

Form::text('username', 'Username')

安装

使用 Composer 安装包。

composer require netojose/laravel-bootstrap-4-forms

Laravel 5.5 或更高版本

如果您正在使用 Laravel 5.5，自动发现功能将为您完成所有工作，您的工作就完成了，您现在可以开始使用了。否则，请按照以下步骤进行安装。

Laravel 5.4

将服务提供者添加到 config/app.php 文件中

'providers' => [
    //...
	NetoJose\Bootstrap4Forms\Bootstrap4FormsServiceProvider::class,
],

将 BootForm 门面添加到 config/app.php 中的别名数组中

'aliases' => [
    //...
    'Form' => NetoJose\Bootstrap4Forms\Bootstrap4FormsFacade::class,
],

用法

基本表单控件

打开和关闭表单

// Opening a form using POST method

{!!Form::open()!!}
// ... Form components here
{!!Form::close()!!}

打开表单将自动为您添加 _token 字段

内联表单

// Making all inputs inline
{!!Form::open()->formInline()!!}

// You can use FALSE to turn off disable form inline
{!!Form::open()->formInline(false)!!}

字段集

// Example
{!!Form::fieldsetOpen('Legend title')!!}
// ... fieldset content
{!!Form::fieldsetClose()!!}

基本输入

文本输入

// Example
{!!Form::text('name', 'User name')!!}

文本区域

// Example
{!!Form::textarea('description', 'Description')!!}

选择

// Example
{!!Form::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])!!}

选项

// Example

// With array
{!!Form::select('city', 'Choose your city')->options([1 => 'Gotham City', 2 => 'Springfield'])!!}

// With collection
$cities = collect([1 => 'Gotham City', 2 => 'Springfield'])
{!!Form::select('city', 'Choose your city')->options($cities)!!}

// With model collection
$cities = \App\City::all();
{!!Form::select('city', 'Choose your city')->options($cities)!!}

// Your model should have id and name attributes. If these keys are different, you can pass second and/or third parameters (you can use the second parameter to access some model acessor, also)
$cities = \App\City::all();
{!!Form::select('city', 'Choose your city')->options($cities, 'city_name', 'id_object_field')!!}

// When you are using collections, you can use prepend method (https://laravel.net.cn/docs/5.8/collections#method-prepend) to add an first empty value, like "Choose your city"
$cities = \App\City::all();
{!!Form::select('city', 'Choose your city')->options($cities->prepend('Choose your city', ''))!!}

复选框

// Example
{!!Form::checkbox('orange', 'Orange')!!}

单选按钮

// Example
{!!Form::radio('orange', 'Orange')!!}

文件

// Example
{!!Form::file('doc', 'Document')!!}

日期输入

// Example
{!!Form::date('birthday', 'Birthday')!!}

电话输入

// Example
{!!Form::tel('number', 'Phone number')!!}

时间输入

// Example
{!!Form::time('hour', 'Meeting hour')!!}

时间输入

// Example
{!!Form::urlInput('website', 'You website')!!}

范围输入

// Example
{!!Form::range('name', 'User name')!!}

隐藏

// Example
{!!Form::hidden('user_id')!!}

锚点

// Example
{!!Form::anchor("Link via parameter", 'foo/bar')!!}

按钮

提交

// Example
{!!Form::submit("Send form")!!}

按钮

// Example
{!!Form::button("Do something", "warning", "lg")!!}

重置

// Example
{!!Form::reset("Clear form")!!}

链式方法

本包使用 链式调用 功能，允许轻松传递更多参数。

填充表单

// Examples

// With initial data using a Model instance
$user = User::find(1);
{!!Form::open()->fill($user)!!}

// With initial array data
$user = ['name' => 'Jesus', 'age' => 33];
{!!Form::open()->fill($user)!!}

URL

用于锚点和表单打开

// Example
{!!Form::anchor("Link via url")->url('foo/bar')!!}

路由

用于锚点和表单打开

// Example
{!!Form::anchor("Link via route")->route('home')!!}

错误包

如果您在页面上有多个表单，请使用。您为每个表单设置一个标识符，错误将附加到该特定表单

// Example: attach this form to a error bag called "registerErrorBag"
{!!Form::open()->route('register.post')->errorBag("registerErrorBag")!!}

// ------------------------------------------------------

// Now, in your controller (register.post route), you can redirect the user to a form page again, with erros inside a error bag called "registerErrorBag"
public function register(Request $request)
{
    $validator = Validator::make($request->all(), [
        // ... rules here
    ]);

    if ($validator->fails()) {
        return redirect()
            ->route('register.form')
            ->withInput()
            ->withErrors($validator, 'registerErrorBag');
    }

    // Proced to register here
}

// ------------------------------------------------------

// If your validation is on a Form Request, you can add a protected method "$errorBag" to set a ErrorBag name

class RegisterRequest extends FormRequest
{

    protected $errorBag = 'registerErrorBag';

    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            // ... rules here
        ];
    }
}

错误

在面板中显示所有错误

// Example
{!!Form::errors("The form has errors")!!}

禁用验证信息

禁用成功/错误状态和验证错误信息

// Example
{!!Form::text('username', 'User name')->disableValidation()!!}

// You can use FALSE to turn off disable validation (to enable it)
{!!Form::text('username', 'User name')->disableValidation(false)!!}

选中

设置复选框/单选按钮的选中状态

// Examples

// Using readonly field
{!!Form::checkbox('agree', 'I agree')->checked()!!}

// You can use FALSE to turn off checked status
{!!Form::checkbox('agree', 'I agree')->checked(false)!!}

内联

设置复选框/单选按钮的选中状态

// Examples
{!!Form::radio('orange', 'Orange')->inline()!!}

{!!Form::checkbox('orange', 'Orange')->inline()!!}

// You can use FALSE to turn off inline status
{!!Form::checkbox('orange', 'Orange')->inline(false)!!}

占位符

// Example
{!!Form::text('name', 'Name')->placeholder('Input placeholder')!!}

多选

// Example
{!!Form::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])->multiple()!!}

地区

使用地区，包将查找 resources/lang/{CURRENT_LANG}/forms/user.php 语言文件，并使用标签和帮助文本作为替换文本的键

// Example
{!!Form::open()->locale('forms.user')!!}

帮助文本

// Example
{!!Form::text('name', 'Name')->help('Help text here')!!}

自定义属性

// Example
{!!Form::text('name', 'Name')->attrs(['data-foo' => 'bar', 'rel'=> 'baz'])!!}

包装 div 中的自定义属性 (<div class="form-group">...</div>)

// Example
{!!Form::text('name', 'Name')->wrapperAttrs(['data-foo' => 'bar', 'id'=> 'name-wrapper'])!!}

只读

// Examples

// Using readonly field
{!!Form::text('name', 'Name')->readonly()!!}

// You can use FALSE to turn off readonly status
{!!Form::text('name', 'Name')->readonly(false)!!}

禁用

// Examples

// Disabling a field
{!!Form::text('name', 'Name')->disabled()!!}

// Disabling a fieldset
{!!Form::fieldsetOpen('User data')->disabled()!!}

// You can use FALSE to turn off disabled status
{!!Form::text('name', 'Name')->disabled(false)!!}

块

// Examples

// Disabling a field
{!!Form::text('name', 'Name')->block()!!}

// You can use FALSE to turn off block status
{!!Form::text('name', 'Name')->block(false)!!}

必填

// Examples

// Disabling a field
{!!Form::text('name', 'Name')->required()!!}

// Disabling a fieldset
{!!Form::fieldsetOpen('User data')->required()!!}

// You can use FALSE to turn off required status
{!!Form::text('name', 'Name')->required(false)!!}

自动填充

参见：https://html.whatwg.com.cn/multipage/forms.html#autofill

如果表单上未指定自动完成值，HTML 规范要求默认值为 'on'。因此，您必须明确将其关闭。

将为具有单词名称的字段自动生成自动完成值（例如 name、email、tel、organization）。完整列表见上述规范。

// Examples

// Switch off autocomplete for the form
{!!Form::open()->autocomplete('off')!!}

// Explicitly set a autocomplete value
{!!Form::text('mobile', 'Mobile Number')->autocomplete('tel')!!}

// Disable autocomplete for fields with valid names
{!!Form::text('name', 'Name')->autocomplete('off')!!}

Id

// Example
{!!Form::text('name', 'Name')->id('user-name')!!}

Id 前缀

// Example
{!!Form::open()->idPrefix('register')!!}

多部分

// Examples
{!!Form::open()->multipart()!!}

// You can use FALSE to turn off multipart
{!!Form::open()->multipart(false)!!}

方法

// Examples
{!!Form::open()->method('get')!!}
{!!Form::open()->method('post')!!}
{!!Form::open()->method('put')!!}
{!!Form::open()->method('patch')!!}
{!!Form::open()->method('delete')!!}

显式 HTTP 动词

// Examples
{!!Form::open()->get()!!}
{!!Form::open()->post()!!}
{!!Form::open()->put()!!}
{!!Form::open()->patch()!!}
{!!Form::open()->delete()!!}

颜色

// Examples
{!!Form::button("Do something")->color("warning")!!}

{!!Form::button("Do something")->color("primary")!!}

显式颜色

// Examples
{!!Form::button("Button label")->warning()!!}
{!!Form::button("Button label")->outline()!!}
{!!Form::button("Button label")->success()!!
{!!Form::button("Button label")->danger()!!}
{!!Form::button("Button label")->secondary()!!}
{!!Form::button("Button label")->info()!!}
{!!Form::button("Button label")->light()!!}
{!!Form::button("Button label")->dark()!!}
{!!Form::button("Button label")->link()!!}

大小

// Examples
{!!Form::button("Do something")->size("sm")!!}

{!!Form::button("Do something")->size("lg")!!}

显式大小

// Examples
{!!Form::button("Button label")->sm()!!}
{!!Form::button("Button label")->lg()!!}

类型

// Examples

// Password field
{!!Form::text('password', 'Your password')->type('password')!!}

// Number field
{!!Form::text('age', 'Your age')->type('number')!!}

// Email field
{!!Form::text('email', 'Your email')->type('email')!!}

最小值

为输入设置最小属性

// Example
{!!Form::text('age', 'Your age')->type('number')->min(18)!!}

最大值

为输入设置最大属性

// Example
{!!Form::text('age', 'Your age')->type('number')->max(18)!!}

名称

// Examples
{!!Form::text('text')->name('name')!!}

标签

// Examples
{!!Form::text('age')->label('Your age')!!}

默认值

// Example
{!!Form::text('name', 'Your name')->value('Maria')!!}

渲染

// Examples

// Number field
{!!Form::render('text')->name('age')->label('Your age')!!}

禁用 is-valid CSS 类

// Examples

// Disable Bootstrap's is-valid CSS class
{!!Form::text('name', 'Name')->disableIsValid()!!}

链式属性

您可以使用链式功能为每个组件设置很多设置

// Examples

{!!Form::open()->locale('forms.user')->put()->multipart()->route('user.add')->data($user)!!}

{!!Form::text('name', 'Name')->placeholder('Type your name')->lg()!!}

{!!Form::anchor("Link as a button")->sm()->info()->outline()!!}

{!!Form::submit('Awesome button')->id('my-btn')->disabled()->danger()->lg()!!}

{!!Form::close()!!}