🦀

laravel6.2¦Formファサードでラジオボタンのデフォルト値とバリデーションエラー時の値の設定

2020/10/12に公開

やりたいこと

・formファサードでラジオボタンを作成
・DBのレコードに保存されていた値の場合、デフォルトで選択状態にする
・バリデーションエラー時にチェックした方に選択されている状態を維持する

環境

・laravel 6.2
・php 7.2

Form::radio()について

{{ Form::radio('gender', 'male', false, ['class' => 'radio-button__input']) }}

第1引数:name
第2引数:value
第3引数:デフォルトでチェック有無(checked)
第4引数:classやidなど

この場合だと下記のような感じ

<input class="radio-button__input" name="gender" type="radio" value="male">

概要

性別を男性/女性/回答しないから選べるラジオボタンとします。
ここから第3引数を修正してデフォルト値の設定+バリデーションエラー時にチェックした方に選択されている状態を維持するようにしていきます。
 
今回は下記の想定で記載していきます。
・DBにusersテーブルがあり、そこにgenderのカラムがあり、stringでmale/female/naを保存
・controllerからfirstで取得し変数$userでbladeへ渡す

考え方🔍

① デフォルト値のチェック設定 : DBのgenderカラムにmaleがあった場合true/ない場合false

($user->gender == 'male')? true:false

② バリデーションエラー時の値の維持 : maleにチェックがあった場合、バリデーションエラーの場合oldを使用してチェック状態にする

old('gender')== 'male' ? true

③ ①と②を合体させる
バリデーションエラー時などは、DBに登録した値よりも直前の入力値を表示させておきたいので

(old('gender')== 'male' ? true: ($user->gender == 'male'))? true:false

とすることでSubmitでNGだったときは入力値を表示、最初にこの画面にきた場合はDBの値をみてチェックをする状態になっているかと思います。

実装💡

<label class="radio-button">
    {{ Form::radio('gender', 'male', (old('gender')== 'male' ? true: ($user->gender == 'male'))? true:false, ['class' => 'radio-button__input']) }}
    <span class="radio-button__icon"></span>
</label>
<label class="radio-button">
    {{ Form::radio('gender', 'female',  (old('gender')== 'female' ? true: ($user->gender == 'famale'))? true:false, ['class' => 'radio-button__input']) }}
    <span class="radio-button__icon"></span>
</label>
<label class="radio-button">
    {{ Form::radio('gender', 'na', (old('gender')== 'na' ? true: ($user->gender == 'na'))? true:false, ['class' => 'radio-button__input']) }}
    <span class="radio-button__icon">回答しない</span>
</label>

自分でチェックしたときは想定どおりの挙動になりましたが、ならなかった場合はご指摘ください、、!

Discussion