tpextbuilder- Displayers[元件]- When表單聯動

[form]和[search]中可用

單選: radio / select

// 單選，radio / select 
$form->radio('test1', '測試1')->options(['1' => '選項1', '2' => '選項2', '3' => '選項3'])->default(1)
    ->when(
        1, //選中值為1時
        $form->text('test_1_a', 'test_1_a')->required()
        //... 更多欄位
    )->when(
        [2, 3],//選中值為[2 或 3]時，多個情況時傳入引數為陣列，陣列各元素之間為[或]的關係
        $form->text('test_1_b', 'test_1_b')->required(),
        $form->textarea('test_1_c', 'test_1_c')->required()
        //... 更多欄位
    );

多選：checkbox / multipleSelect / dualListbox

// 
$form->checkbox('test2', '測試2')->options(['1' => '選項1', '2' => '選項2', '3' => '選項3', '4' => '選項4'])->default(1)
    ->when(
        1,//只選中一個值，且這個值為1時
        $form->text('test_2_a', 'test_2_a')->required()
        //... 更多欄位
    )->when(
        [2, 3],//只選中一個值，且這個值為[2 或 3]時，多個情況時傳入引數為陣列，陣列各元素之間為[或]的關係
        $form->text('test_2_b', 'test_2_b')->required(),
        $form->textarea('test_2_c', 'test_2_c')->required()
        //... 更多欄位
    )->when(
        [4, '3+4', '2+1+4'],//(只選中一個值，且這個值為4時) 或 (同時選中3,4兩個值) 或 (同時選中1,2,4三個值)。
        //陣列各元素之間為[或]的關係，單個元素用+號連線多個值表示同時選中（值之間不分先後順序[2+1+4]和[1+2+4]和[4+1+2]等情況等效）
        $form->radio('test_2_d', 'test_2_d')->options([1 => '1', 2 => '2']),
        $form->textarea('test_2_e', 'test_2_e')->required()
        //... 更多欄位
    );

單個元素用+號連線多個值

單個元素內字串都可以用+相連，不一定是數字，取決於根據選項值的型別：

// 
$form->checkbox('test2', '測試2')->options(['type1' => '選項1', 'type2' => '選項2', 'type3' => '選項3', 'type4' => '選項4'])->default(1)
    ->when(
        'type1',
        $form->text('test_2_a', 'test_2_a')->required()
        //...
    )->when(
        ['type2', 'type3'],
        $form->text('test_2_b', 'test_2_b')->required()
        //...
    )->when(
        ['type4', 'type3 + type4', 'type2 + type1 + type4'],
        $form->radio('test_2_d', 'test_2_d')->options([1 => '1', 2 => '2'])
        //...
    );

when的使用

基本格式when($cases, ...$toggleFields);

第二引數$toggleFields的3種使用方式：

1. 作為可變引數：

when($cases, $field1, $field2, $field3, $fieldN, );

1. 作為陣列元素[作為1的折衷方案，可變引數最後跟隨一個,號，在低版本php中會報錯，放在陣列中可避免]

with($cases, [$field1, $field2, $field3, $fieldN, ]);

1. 作為匿名方法中的語句

with($cases, function($form){$field1;$field2;$field3;$fieldN;});

$form->radio('test1', '測試1')->options(['1' => '選項1', '2' => '選項2', '3' => '選項3', '4' => '選項4'])->default(1)
    ->when(
        1,
        $form->text('test_1_a', 'test_1_a')->required(),
        $form->textarea('test_1_b', 'test_1_b'),
        //... 更多欄位
    )->when(
        2,
        [
            $form->text('test_1_c', 'test_1_c')->required(),
            $form->textarea('test_1_d', 'test_1_d'),
            //... 更多欄位
        ]

    )->when(
        [3, 4],
        function(\tpext\builder\common\Form $_form) use ($form){
            //$_form 和 $form 是同一個東西，實際中使用其中一種方式即可。
            $_form->text('test_1_e', 'test_1_e')->required();
            $form->textarea('test_1_f', 'test_1_f');
            //... 更多欄位
        }

    );

若第二引數$toggleFields不傳，則可再呼叫with(...$toggleFields)方法。

$form->radio('test1', '測試1')->options(['1' => '選項1', '2' => '選項2', '3' => '選項3', '4' => '選項4'])->default(1)
    ->when(1)->with(
        $form->text('test_1_a', 'test_1_a')->required(),
        $form->textarea('test_1_b', 'test_1_b'),
        //... 更多欄位
    )
    ->when(2)->with(
       [
            $form->text('test_1_c', 'test_1_c')->required(),
            $form->textarea('test_1_d', 'test_1_d'),
            //... 更多欄位
        ]
    )
    ->when([3, 4])->with(function(\tpext\builder\common\Form $_form) use ($form){
            //$_form 和 $form 是同一個東西，實際中使用其中一種方式即可。
            $_form->text('test_1_e', 'test_1_e')->required();
            $form->textarea('test_1_f', 'test_1_f');
            //... 更多欄位
    });

注意，第二個引數`$toggleFields`的傳入時機

要麼when的時候傳入，要麼when的時候不傳，然後再呼叫with方法傳入。不要兩種方式同時使用，如下面的用法是錯誤的:

$form->radio('test1', '測試1')->options(['1' => '選項1', '2' => '選項2', '3' => '選項3', '4' => '選項4'])->default(1)
    ->when(
        1,
        $form->text('test_1_a', 'test_1_a')->required(),
        //... 更多欄位
    )->with(
       [
            $form->text('test_1_b', 'test_1_b'),
            $form->textarea('test_1_c', 'test_1_c'),
            //... 更多欄位
        ]
    );

擴充用法，利用`with`實現分散佈局

$text1 = $form->text('test_1_a', 'test_1_a')->required();
//
$radio1 = $form->radio('test1', '測試1')->options(['1' => '選項1', '2' => '選項2'])->default(1);
//
$text2 = $form->text('test_1_b', 'test_1_b')->required();
$text3 = $form->text('test_1_c', 'test_1_c')->required();
//
$radio1->when(1)->with($text1, $text2);
$radio1->when(2)->with($text3);
//text1,text2,text3在文件中的位置相對於radio1有前有後是分散開的，如果在when中傳入，那位置是受限的，使用`with`則更靈活。

切換fields

$form->radio('test1', '測試1')->options(['1' => '選項1', '2' => '選項2'])->default(1)
    ->when(1)->with(
        $form->left(12)->with(
            //fields
        )
    )
    ->when(2)->with(
        $form->left(12)->with(
            //fields
        )
    );

表單提交

切換後被隱藏的元素，表單提交時是被忽略的，後臺獲取不到對應的欄位
可以在不同的case裡面重複同一個欄位

$form->radio('test1', '測試1')
    ->when(1)->with(
        $form->text('test_1', 'test_1')->required()-help('case-1 的test_1'),
        $form->text('test_2', 'test_2')->required(),
    )
    ->when(2)->with(
        $form->text('test_1', 'test_1')->required()-help('case-2 的test_1'),//不同case的欄位重複是允許的，只有其中一個會提交
        $form->text('test_3', 'test_3')->required(),
    )
    ->when(3)->with(
        $form->text('test_4', 'test_4')->required(),
    );

切換後隱藏的欄位js驗證暫時取消，重新切換回來後重新生效

本作品採用《CC 協議》，轉載必須註明作者和本文連結