yii中ActiveForm表單工具的用法總結

ActiveForm 要和 Model/ActiveRecord 配合使用的。 所以 先要張表 像這樣 ↓

+----------+--------------+------+-----+---------+----------------+
| Field    | Type         | Null | Key | Default | Extra          |
+----------+--------------+------+-----+---------+----------------+
| id       | int(11)      | NO   | PRI | NULL    | auto_increment |
| username | varchar(20)  | NO   |     | NULL    |                |
| comment  | text         | NO   |     | NULL    |                |
| add_time | datetime     | YES  |     | NULL    |                |
| gender   | tinyint(3)   | YES  |     | NULL    |                |
+----------+--------------+------+-----+---------+----------------+

有了表，那我們就建立model咯，這裏我直接用gii腳手架生成了名爲 Comments 的model。

表單裏需要的信息：
1. 用戶名(varchar類型數據)
2. 評論內容 (text類型數據)
3. 性別(int類型數據)

我想在你的控制器的action中，至少應該這麼寫：

/*action*/
$model = new Comments(); //實例化 Comments model
return $this->render('msg',['model'=>$model]); //將 comments model 作爲參數 推進我要的視圖頁面

render中的 「msg」就是對應的視圖頁面

那接下去看下msg視圖： 在msg視圖中，我們常用的方法和屬性大都包含在了兩個關鍵的類中，分別是 yii\helpers\Html 和 yii\bootstrap\ActiveForm，前者負責將一些常用的html標籤方法化，方便統一。 後者就是我們的主角 ActiveForm。爲了讓我們接下去表單中的代碼簡潔益與閱讀，我們就在視圖頭部加入引用：

<!--msg.php文件-->
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
?>

普通表單我們用 <form>...</form> 作爲開頭和結尾，ActiveForm也一樣，只不過換了個更加酷炫的方法：

<!--msg.php文件-->
 <?php $form = ActiveForm::begin([...]);?>
    ...
    ...
    ...
 <?php ActiveForm::end();?>   

ActiveForm就是這種結構啦！(≖ ‿ ≖)✧，begin中的省略號是我們要配置的參數，一會我們再把他替換掉， 先來看看錶單要填寫的條目：

<!--msg.php文件-->
<?= $form->field($model,'username')->textInput(); //用戶名輸入框 ?>
<?= $form->field($model,'comment')->textarea(); //評論內容輸入框 ?>
<?= $form->field($model,'gender')->radioList(['1'=>'男','2'=>'女'])->label('性別'); //性別選擇框 ?>

沒錯，只要一行。
一行一條目，因爲field自動幫你打包了（1個默認label，1個默認input，1個默認error提示）。
你需要提供的參數也就是
1.我們從action推進來的 comments model。
2.model 中的屬性(對應表中的字段)。
label從哪裏讀出來的？Comments model 中的 attributeLabels。
error顯示的規則哪裏來的？Comments model 中的 rules 規則驗證。

field($model,'xxx')

後面哪些緊跟的是啥？
就是那要選用的輸入框類型。
ActiveForm 的 field() 方法，返回的是一個 根據你給定的 model和model屬性 生成的
ActiveField對象 ，field()後緊跟的方法則是根據你的需求選擇輸入框的類型，還有一些自定義配置。
拿上面gender的栗子講：
如果 只是這樣寫的話，則會返回給我一個默認的 textInput輸入框，所以我加了 ->radioList(['1'=>'男','2'=>'女']) 把textInput改成了一個 radio單選框 ，radioList中的數組就是對應選項的值和標籤。->label('性別')，我覺得我不想用 Comments model 中寫好的屬性翻譯，所以我把label也重寫了一下。

有了輸入的條目，那接下來的就是提交的按鈕咯：

<!--msg.php文件-->
<?= Html::submitButton('發表評論', ['class' => 'btn btn-primary', 'name' => 'submit-button']) ?>

第一個參數就是你要顯示的button的文字，第二個數組同樣是配置，增加了button的class和name。

接下來再回到ActiveForm::begin([...])方法，看下begin中的一般參數配置：

[
    'id'=>'msg-form',
    'options' => ['class'=>'form-horizontal'],
    'enableAjaxValidation'=>false,
    'fieldConfig' => [
                'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-8\">{error}</div>",
                'labelOptions' => ['class' => 'col-lg-1 control-label'],
    ]
]

1.'id'=>'msg-form' 表單form 的id ，除了唯一標識的作用外，如果你開啓了表單異步規則驗證，這個也會作爲$_POST[ajax]參數提交到action中。
2.'options' => ['class'=>'form-horizontal']給form 加的一些屬性
3.'enableAjaxValidation'=>false這個就是「是否進行異步驗證」的配置。其實它默認是false的，完全可以不用列出來，之所以這裏列出是覺得有必要知道這個屬性的存在，因爲在複雜的表單中一般都是 設置爲true。同時，在你的action中還要增加對於異步驗證的方法。
4.'fieldConfig'對錶單中 將要生成的 ActiveField對象 進行配置，上面講的是在input條目中進行配置，而這裏就是統一配置。
'template' => "{label}\n

{input}

\n

{error}

", 顧名思義，模板。 也就是讓一個輸入框套餐（label+input+error）按照我要求的樣式顯示出來。如果不設置，那yii會採用默認的模板 "{label}\n{input}\n{hint}\n{error}"（實在太難看(｀･д･´) ）。'labelOptions' => ['class' => 'col-lg-1 control-label'], 就是增加套餐中{label}的屬性（以美化樣式）。

下面是整個msg.php的樣子：

<!-- msg.php -->
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
?>



<div class="container">
<!--    開始帥氣的表單組件-->
    <?php $form = ActiveForm::begin([
            'id' => 'msg-form',
            'options' => ['class'=>'form-horizontal'], 
            'enableAjaxValidation'=>false,
            'fieldConfig' => [
                'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-8\">{error}</div>",
                'labelOptions' => ['class' => 'col-lg-1 control-label'],
            ]
    ]);
    ?>
<!--表單條目-->
    <?= $form->field($model,'username')->textInput(); ?>

    <?= $form->field($model,'comment')->textarea(); ?>

    <?= $form->field($model,'gender')->radioList(['1'=>'男','2'=>'女'])->label('性別'); ?>

<!--提交按鈕-->
    <div class="form-group">
        <div class="col-lg-offset-1 col-lg-11">
            <?= Html::submitButton('發表評論', ['class' => 'btn btn-primary', 'name' => 'submit-button']) ?>
        </div>
    </div>

<!--結束帥氣的表單組件-->
    <?php ActiveForm::end();?>

</div>

---

到這裏，如果點了提交後，post 的內容將會是這樣的

    [_csrf] => RHFOTmg1TUpwNX0sKQ0CEnQ/ES8uQyM9HhIcFhBxHnM1QhQELnR9BA==
    [Comments] => Array
        (
            [username] => cookedsteak
            [comment] => Here comes the comment !
            [gender] => 2
        )

    [ajax] => msg-form
    [submit-button] => undefined

之後就是在action中按照你自己的需求處理數據啦。

---

*原文鏈接：https://segmentfault.com/q/1010000002604195