ActiveForm
ActiveForm要和Model一起使用
我想在你的控制器的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;
?>
普通表单我们用 ... 作为开头和结尾,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中按照你自己的需求处理数据啦。
ActiveForm的更多相关文章
- yii2 modal弹窗之ActiveForm ajax表单异步验证
作者:白狼 出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
- YII2.0 Activeform表单组件的使用方法
Activeform文本框:textInput();密码框:passwordInput();单选框:radio(),radioList();复选框:checkbox(),checkboxList(); ...
- yii2.0 Activeform表单部分组件使用方法
文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dr ...
- [moka同学笔记]yii2 activeForm 表单样式的修改(二)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABAEAAANXCAIAAADLkdErAAAgAElEQVR4nOzdfWwc953nef6zwO5Zg8
- activeform 配置
<?php $form = ActiveForm::begin([ 'action' => ['/admin/admin/adminadd'], 'id' => 'login-for ...
- Yii2 ActiveForm表单自定义样式
实例: <?php $form = ActiveForm::begin([ 'fieldConfig' => [ 'template' => '<div class=" ...
- DLL ActiveForm 线程同步问题
本文试着从分析Synchronize同步执行的实现机制入手,来解决DLL/ActiveForm中线程同步的问题. 线程中进行同步时调用的Synchronize函数,仅仅是把调用调用线程.调用方法地址. ...
- Yii 2.0 ActiveForm生成表单 ,控制表单label和filed样式,filed一旦报错,前面lable颜色跟着变,看图,帮你解决
需要生成如下图的表单样式,图一:
- yii中调整ActiveForm表单样式
Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, <?php $form = ActiveForm::begin([ 'id' => 'login-for ...
随机推荐
- PHP设计模式之适配器模式
将一个类的接口转换成客户希望的另一个接口,适配器模式使得原本的由于接口不兼容而不能一起工作的那些类可以一起工作.应用场景:老代码接口不适应新的接口需求,或者代码很多很乱不便于继续修改,或者使用第三方类 ...
- php设计模式:工厂模式
php设计模式:工厂模式 意图: 定义一个用于创建对象的接口,让子类决定实例化哪一个类. 工厂模式实现: 工厂模式中任何创建对象的工厂类都要实现这个接口,实现接口的方法体中都要实现接口中的方法,它声明 ...
- 前端工程的构建工具对比 Gulp vs Grunt
1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工 ...
- 基于类和redis的监控系统开发
最近学习python运维开发,编写得一个简单的监控系统,现记录如下,仅供学习参考. 整个程序分为7个部分: 第一个部分根据监控架构设计文档架构如下: .├── m_client│ ├── conf ...
- Leaflet学习笔记-Leaflet.awesome-markers
基础篇传送门 http://www.cnblogs.com/CoffeeEddy/p/4919987.html 效果图 是不是感觉很美观啊 为什么选择awesome 地图上面需要各种各样的Mark,难 ...
- CSS3 calc() 会计算的属性
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. ...
- bzoj 3160: 万径人踪灭 manachar + FFT
3160: 万径人踪灭 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 133 Solved: 80[Submit][Status][Discuss] ...
- 如何监控 Tomcat?Zabbix 与 Cloud Insight 对比
JVM 监控工具有很多,像命令 jstat,jmap,jstack,jinfo 可以根据不同需求查看不同的系统信息,还有图像化界面 jconsole,都是很方便的工具.这些可以参考 JAVA自带监控工 ...
- 纯js将form表单的数据封装成json 以便于ajax发送
使用方式: var json = form2Json("formId");//这里的参数是form表单的id值 form2json.js function form2Json(fo ...
- 设计模式之单例(singleton)设计模式代码详解
单例有两种:懒汉式和饿汉式 /** * 懒汉式的单例模式 * 这种单例模式如果采用到多线程调用该方法,有可能会产生多个实例,原因是: * 当线程一进入了①处,此时轮到线程二的时间片,线程二也来到①处, ...