cakePHP / 備忘録

cakePHP3でフォームヘルパーを使用して入力フォームの構築をすると、デフォルトはラベルとインプットが同時に表示します。

echo $this->Form->control('example');
// 表示するタグ
<label>example</label><input type="text" id="example" name="example">

これをBootstrap3で装飾し、さらに他のインプットフォームにも適用していきたいと考えると、予めBootstrap3で適応するクラス名で部品を吐き出すようにテンプレートを設定してあげる必要があります。

$Templates = [
  'inputContainer' => '<div class="input {{type}}{{required}} form-group">{{content}}</div>',
  'formGroup' => '{{label}}<div class="col-sm-9">{{input}}</div>',
  'input' => '<input type="{{type}}" name="{{name}}"{{attrs}}/>'
];
$this->Form->setTemplates($Templates);

こうする事で、ヘルパーを使用してインプットを吐き出すときに自動で生成してくれます。labelのクラス名はテンプレート側ではなくヘルパー側でオプションをつけてあげたほうが良いかもしれません。

echo $this->Form->control('example', ['label' => ['class' => 'col-sm-3 control-label']]);

<div class="input text required form-group">
  <label class="col-sm-3 control-label" for="name-main">example</label>
  <div class="col-sm-9"><input type="text" name="example" class="form-control" id="example"></div>
</div>

これだとバリデーションでエラーがあった場合、inputContainerは適用されず、form-groupの中にエラーメッセージが挿入され、レイアウト崩れが起きてしまいます。

できればコンテンツの中で表示して欲しいわけで、その時はエラー表示用のテンプレートを設定し、さらにメッセージの表示位置も設定すると良いと思います。

$Templates = [
  'inputContainerError' => '<div class="input {{type}}{{required}} error form-group">{{content}}</div>',
  'inputContainer' => '<div class="input {{type}}{{required}} form-group">{{content}}</div>',
  'formGroup' => '{{label}}<div class="col-sm-9">{{input}}{{error}}</div>',
  'input' => '<input type="{{type}}" name="{{name}}"{{attrs}}/>'
];
$this->Form->setTemplates($Templates);