CakePHP4でAdminLTEのRegisterテンプレートを使ってエラーメッセージを表示する

CakePHP4でAdminLTEのRegisterテンプレートを使ってエラーメッセージを表示する CakePHP

前回、以下の記事でCakePHP4にAdminLTEを適用する記事を書きました。

ユーザーを登録する画面ということで、AdminLTEの以下Registerテンプレートを使っていました。
https://adminlte.io/themes/v3/pages/examples/register.html

今回はAdminLTEのRegisterテンプレートでエラーメッセージを表示してみます。

エラー時のスタイルを適用しないとレイアウトが崩れる

前回作成した内容でエラーメッセージを表示したところ、以下のようにレイアウトが崩れてしまいました。

エラー時のスタイルを適用する必要があるので、以下のように修正します。

<div class="input-group mb-3">
    <?php
        if ($this->Form->isFieldError('nickname')) {
            echo $this->Form->input('nickname', [
                'placeholder' => 'ニックネームを入力してください', 'class' => 'form-control is-invalid']);
        } else {
            echo $this->Form->input('nickname', [
                'placeholder' => 'ニックネームを入力してください', 'class' => 'form-control']);
        }
    ?>
    <div class="input-group-append">
    <div class="input-group-text">
        <span class="fas fa-user"></span>
    </div>
    </div>
    <?= $this->Form->error('nickname') ?>
</div>

まず、16行目にエラーメッセージを表示する記述を追加しました。
これに伴い、controlメソッドを使用していた箇所はinputメソッドに変更しました。

そして、そのinputメソッドは分岐して記述するようにしています。

isFieldErrorメソッドで、対象フィールドにエラーがあるかないかをチェックし、エラーがある場合はclass属性に「is-invalid」を追加するようにしました。

class属性については、上記のようにエラーがあるかないかで分岐したいので、フォームのテンプレート設定からは以下のように記述を削除しました。
合わせて、エラー用のテンプレートも追加しています。

    $this->Form->setTemplates([
        'inputContainer' => '{{content}}',
        'input' => '<input type="{{type}}" name="{{name}}"{{attrs}}/>',
        'label' => false,
        'error' => '<span class="error invalid-feedback">{{content}}</span>',
    ]);

本来はエラー時にclass属性を追加できる仕組みが欲しい

CakePHPで入力項目のエラー発生時に、class属性を追加できれば良かったのですが、できませんでした。

stackoverflowに以下の質問がありましたが、同じようにはできませんでした。
https://stackoverflow.com/questions/56468320/how-to-add-class-is-invalid-in-an-input-error-in-cakephp

これは本来できるような気がするので、誰が分かれば教えて欲しいです。

タイトルとURLをコピーしました