表单字段动态显示
<h1>表单字段动态显示</h1>
<p>> {tip} 此功能在<a href="widgets-form.md">工具表单</a>中一样有效</p>
<p>表单字段动态显示是指，在选择表单项的指定的选项时，联动显示其他的表单项。</p>
<p><a href="{{public}}/assets/img/screenshots/form-when.gif" target="_blank">
<img class="img" src="{{public}}/assets/img/screenshots/form-when.gif" />
</a> </p>
<p>目前支持的表单联动的组件有：</p>
<ul>
<li><code>select</code></li>
<li><code>multipleSelect</code></li>
<li><code>radio</code></li>
<li><code>checkbox</code></li>
</ul>
<h2>使用方法</h2>
<p>可以将上面的组件分为单选和多选两种类型，其中<code>select</code>、<code>radio</code>为单选组件，其它为多选组件</p>
<h3>单选组件</h3>
<p>下面的例子中，选择不同的国籍类型，将会切换选择不同的联动表单项：</p>
<pre><code class="language-php">$form-&gt;radio('radio')
-&gt;when([1, 4], function (Form $form) {
// 值为1和4时显示文本框
$form-&gt;text('text1');
$form-&gt;text('text2');
$form-&gt;text('text3');
})
-&gt;when(2, function (Form $form) {
$form-&gt;editor('editor');
})
-&gt;when(3, function (Form $form) {
$form-&gt;image('image');
})
-&gt;options([
1 =&gt; '显示文本框',
2 =&gt; '显示编辑器',
3 =&gt; '显示文件上传',
4 =&gt; '还是显示文本框',
])
-&gt;default(1);</code></pre>
<p>上例中，方法<code>when(1, $callback)</code>等效于<code>when('=', 1, $callback)</code>, 如果用操作符<code>=</code>，则可以省略这个参数</p>
<p>同时也支持这些操作符，<code>=</code>、<code>&gt;</code>、<code>&gt;=</code>、<code>&lt;</code>、<code>&lt;=</code>、<code>!=</code>使用方法如下：</p>
<pre><code class="language-php">$form-&gt;radio('check')
-&gt;when('&gt;', 1, function () {
})-&gt;when('&gt;=', 2, function () {
});</code></pre>
<p><code>select</code> 组件的使用方法和<code>radio</code>是一样的。</p>
<p>另外需要注意的是，如果使用动态显示功能之后表单不能使用<code>required</code>方法，应该使用<code>required_if</code>代替，如</p>
<pre><code class="language-php">$form-&gt;radio('type')
-&gt;when([1, 4], function (Form $form) {
$form-&gt;text('text1')
-&gt;rules('required_if:type,1,4') // 使用required_if
-&gt;setLabelClass(['asterisk']); // 显示 * 号
});</code></pre>
<h3>多选组件</h3>
<p>多选组件支持两个操作符：<code>in</code>、<code>notIn</code></p>
<pre><code class="language-php">$form-&gt;checkbox('nationality', '国籍')
-&gt;options([
1 =&gt; '中国',
2 =&gt; '外国',
])-&gt;when([1, 2], function (Form $form) {
$form-&gt;text('name', '姓名');
$form-&gt;text('idcard', '身份证');
})-&gt;when('notIn', 2, function (Form $form) {
$form-&gt;text('name', '姓名');
$form-&gt;text('passport', '护照');
});</code></pre>
<p><code>multipleSelect</code>组件的使用方法和<code>checkbox</code>是一样的。</p>
<h3>布局</h3>
<p>表单动态显示功能支持结合<code>column</code>以及<code>tab</code>布局功能一起使用，用法如下</p>
<p><code>tab</code>布局</p>
<pre><code class="language-php">$form-&gt;tab('Radio', function (Form $form) {
$form-&gt;display('title')-&gt;value('单选框动态展示');
$form-&gt;radio('radio')
-&gt;when([1, 4], function (Form $form) {
$form-&gt;text('text1');
$form-&gt;text('text2');
})
-&gt;when(2, function (Form $form) {
$form-&gt;editor('editor');
})
-&gt;options($this-&gt;options)
-&gt;default(1);
});</code></pre>
<p><code>column</code>布局</p>
<pre><code class="language-php">$form-&gt;column(6, function (Form $form) {
$form-&gt;radio('radio')
-&gt;when([1, 4], function (Form $form) {
$form-&gt;text('text1');
$form-&gt;text('text2');
})
-&gt;when(2, function (Form $form) {
$form-&gt;editor('editor');
})
-&gt;options($this-&gt;options)
-&gt;default(1);
});</code></pre>