README

用于在CodeIgniter 4项目中构建和管理表单的库（面向对象方式）。

内容

安装与加载
组件
如何使用

安装与加载

CI4FormBuilder可在Packagist上找到，并且通过Composer安装是推荐的方式。将以下行添加到您的composer.json文件中

"rafaelwendel/ci4formbuilder" : "^0.0.1"

或者运行

composer require rafaelwendel/ci4formbuilder

组件

以下表单组件可供使用。

按钮
复选框
下拉菜单
隐藏
输入框
标签
多选
密码
单选
重置
提交
文本区域
上传

如何使用

基本用法

引用的组件可以被实例化并添加到表单中。

<?php

namespace App\Controllers;

use CI4FormBuilder\Form;
use CI4FormBuilder\Input;
use CI4FormBuilder\Label;
use CI4FormBuilder\Submit;

class Home extends BaseController
{
    public function index()
    {
        $form = new Form(); //the same constructor params of CI4 "form_open" function can be used

        //create an input to "firstname"
        $firstNameField = new Input('firstname'); //the same constructor params of CI4 "form_input" function
        //set a label to component
        $firstNameField->setLabel(new Label('First Name: ', 'firstName'));

        //create an input to "lastname"
        $lastNameField = new Input('lastname');
        $lastNameField->setLabel(new Label('Last Name: ', 'lastName'));

        $submitButton = new Submit('btnSave', 'Save');

        //add components to $form
        $form->addComponent($firstNameField)
             ->addComponent($lastNameField)
             ->addComponent($submitButton);

        //display form
        echo $form->display();
    }
}

上述代码会输出以下结果

<form action="https://:8080/" method="post" accept-charset="utf-8">
    <label for="firstName">First Name: </label>
    <input type="text" name="firstname" value="">

    <label for="lastName">Last Name: </label>
    <input type="text" name="lastname" value="">

    <input type="submit" name="btnSave" value="Save">
</form>

使用更多组件的另一个示例

<?php

namespace App\Controllers;

use CI4FormBuilder\Checkbox;
use CI4FormBuilder\Dropdown;
use CI4FormBuilder\Form;
use CI4FormBuilder\Input;
use CI4FormBuilder\Label;
use CI4FormBuilder\Password;
use CI4FormBuilder\Submit;

class Home extends BaseController
{
    public function index()
    {
        $form = new Form();

        //create an input to "firstname"
        $nameField = new Input('name'); 
        $nameField->setLabel(new Label('Name: ', 'name'));

        //create an input type email to "email"
        $emailField = new Input('email', '', '', 'email'); //last param is type of input
        $emailField->setLabel(new Label('Email: ', 'email'));

        $genderField = new Dropdown('gender', ['M' => 'Male', 'F' => 'Female']);
        $genderField->setLabel(new Label('Gender: ', 'gender'));

        $passField = new Password('password');
        $passField->setLabel(new Label('Password: ', 'password'));

        $checkTerms = new Checkbox('terms', 'Accept');
        $checkTerms->setLabel(new Label('Agree the terms', 'terms'));

        $submitButton = new Submit('btnSave', 'Save');

        //add components to $form (pass an array with all components)
        $form->addComponent([$nameField, $emailField, $genderField, $passField, $checkTerms, $submitButton]);

        //display form
        echo $form->display();
    }
}

输出

<form action="https://:8080/" method="post" accept-charset="utf-8">

    <label for="name">Name: </label>
    <input type="text" name="name" value="">
	
    <label for="email">Email: </label>
    <input type="email" name="email" value="">
	
    <label for="gender">Gender: </label>
    <select name="gender">
        <option value="M">Male</option>
        <option value="F">Female</option>
    </select>
	
    <label for="password">Password: </label>
    <input type="password" name="password" value="">

    <label for="terms">Agree the terms</label>
    <input type="checkbox" name="terms" value="Accept">

    <input type="submit" name="btnSave" value="Save">
</form>

使用模板

使用Template类，可以定义表单及其组件的默认布局。以下选项可供使用

beforeForm : 在<form>标签之前插入的代码
afterForm : 在</form>关闭标签之后插入的代码
beforeComponent : 在每个组件之前插入的代码
afterComponent : 在每个组件之后插入的代码
beforeErrorMessage : 在组件错误信息（如验证）之前插入的代码
afterErrorMessage : 在组件错误信息之后插入的代码
buttonExtra : 按钮的额外属性（class、id、onclick等）（可以使用数组、对象或字符串）
checkboxExtra : 复选框的额外属性
dropdownExtra : 下拉菜单的额外属性
hiddenExtra : 隐藏字段的额外属性
inputExtra : 输入字段的额外属性
labelExtra : 标签的额外属性
multiselectExtra : 多选框的额外属性
passwordExtra : 密码框的额外属性
radioExtra : 单选按钮的额外属性
resetExtra : 重置按钮的额外属性
submitExtra : 提交按钮的额外属性
textareaExtra : 文本区域的额外属性
uploadExtra : 上传字段的额外属性

示例

<?php

namespace App\Controllers;

use CI4FormBuilder\Form;
use CI4FormBuilder\Input;
use CI4FormBuilder\Label;
use CI4FormBuilder\Password;
use CI4FormBuilder\Submit;
use CI4FormBuilder\Template;

class Home extends BaseController
{
    public function index()
    {
        $form = new Form();

        //lets set the Template options
        $template = new Template([
            'beforeForm' => '<div class="form-login">',
            'afterForm' => '</div>',
            'beforeComponent' => '<div class="form-field">',
            'afterComponent' => '</div>',
            'inputExtra' => 'class="form-input"', //pass extra in a string
            'submitExtra' => ['id' => 'btnLogin', 'class' => 'btn'], //pass extra in an array 
        ]);

        //define the Form template
        $form->setTemplate($template);

        //create an input to "username"
        $usernameField = new Input('username'); 
        $usernameField->setLabel(new Label('Username: ', 'username'));

        //create an input to "password"
        $passField = new Password('password');
        $passField->setLabel(new Label('Password: ', 'password'));

        $submitButton = new Submit('btnLogin', 'Login');

        //add components to $form
        $form->addComponent([$usernameField, $passField, $submitButton]);

        //display form
        echo $form->display();
    }
}

输出

<div class="form-login">
	<form action="https://:8080/" method="post" accept-charset="utf-8">

        <div class="form-field">
            <label for="username">Username: </label>
            <input type="text" name="username" value="" class="form-input">
        </div>

        <div class="form-field">
            <label for="password">Password: </label>
            <input type="password" name="password" value="">
        </div>

        <div class="form-field">
            <input type="submit" name="btnLogin" value="Login" id="btnLogin" class="btn">
        </div>
    </form>
</div>

设置表单数据

您可以在构造函数中直接传递组件的值。例如

$nameField = new Input('name', 'Michael Jordan'); 
$nameField->setLabel(new Label('Name: ', 'name'));

$emailField = new Input('email', 'mjordan@nba.com', '', 'email'); //last param is type of input
$emailField->setLabel(new Label('Email: ', 'email'));

/*
    Output:
    <label for="name">Name: </label>
    <input type="text" name="name" value="Michael Jordan">

    <label for="email">Email: </label>
    <input type="email" name="email" value="mjordan@nba.com">
*/

然而，您也可以通过在$form实例中的setFormData方法传递包含要设置的数据的array或object来传递数据。数据可以从模型或请求中提供。

$form = new Form(); 

//Customers form
$firstNameField = new Input('firstname'); /
$firstNameField->setLabel(new Label('First Name: ', 'firstName'));

$lastNameField = new Input('lastname');
$lastNameField->setLabel(new Label('Last Name: ', 'lastName'));

$submitButton = new Submit('btnSave', 'Save');

//add components to $form
$form->addComponent($firstNameField)
        ->addComponent($lastNameField)
        ->addComponent($submitButton);

//set data from db
$customerToEdit = model('CustomerModel')->find(1); //an object or array with "firstname" and "lastname" params/keys.
$form->setFormData($customerToEdit);

//to set data from request
$form->setFormData($this->request->getPost());

//display form
echo $form->display();

设置错误信息

要包含错误信息（通常是验证错误），只需将它们传递给setErrorsValidation方法。此外，还可以配置模板以显示错误

//define validation rules
$errors = [];
$validation = \Config\Services::validation();
if($this->request->is('post')) {
    $validation->setRules([
        'name'    => 'required|min_length[5]',
        'email'   => 'required|valid_email',
    ]);
    if(! $validation->run($this->request->getPost())) {
        $errors = $validation->getErrors();
    }
}

$form = new Form();

//set errors messages
$form->setErrorsValidation($errors);

//Template options to display errors
$template = new Template([
    'beforeErrorMessage' => '<span style="color: red">',
    'afterErrorMessage' => '</span>',
]);

//define the Form template
$form->setTemplate($template);

//create an input to "username"
$nameField = new Input('name'); 
$nameField->setLabel(new Label('Name: ', 'name'));

//create an input to "email"
$emailField = new Input('email', '', '', 'email');
$emailField->setLabel(new Label('Email: ', 'email'));


$submitButton = new Submit('btnSave', 'Save');

//add components to $form
$form->addComponent([$nameField, $emailField, $submitButton]);

//display form
echo $form->display();

输出

<label for="name">Name: </label>
<input type="text" name="name" value="">
<span style="color: red">The name field is required.</span>

<label for="email">Email: </label>
<input type="email" name="email" value="">
<span style="color: red">The email field must contain a valid email address.</span>

rafaelwendel / ci4formbuilder

维护者

详细信息