Permalink
Browse files

DefaultFormRenderer: Add control .error class (#209)

Bootstrap 4 marks invalid controls with is-invalid class.
Let’s allow to set this class in DefaultFormRenderer.
  • Loading branch information...
jtojnar authored and dg committed Feb 9, 2019
1 parent dcd80e5 commit 11e21e551e92718e932f421aa19a497551a46fc6
@@ -28,6 +28,7 @@ function makeBootstrap4(Form $form): void
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"';
$renderer->wrappers['control']['description'] = 'span class=form-text';
$renderer->wrappers['control']['errorcontainer'] = 'span class=form-control-feedback';
$renderer->wrappers['control']['.error'] = 'is-invalid';
foreach ($form->getControls() as $control) {
$type = $control->getOption('type');
@@ -47,7 +47,7 @@ class DefaultFormRenderer implements Nette\Forms\IFormRenderer
* \---
*
* /--- control.container [.odd]
* .... CONTROL [.required .text .password .file .submit .button]
* .... CONTROL [.required .error .text .password .file .submit .button]
* .... control.requiredsuffix
* .... control.description
* .... control.errorcontainer + control.erroritem
@@ -95,6 +95,7 @@ class DefaultFormRenderer implements Nette\Forms\IFormRenderer
'erroritem' => '',
'.required' => 'required',
'.error' => null,
'.text' => 'text',
'.password' => 'text',
'.file' => 'text',
@@ -386,8 +387,12 @@ public function renderPairMulti(array $controls): string
$control->setOption('rendered', true);
$el = $control->getControl();
if ($el instanceof Html && $el->getName() === 'input') {
$el->class($this->getValue("control .$el->type"), true);
if ($el instanceof Html) {
if ($el->getName() === 'input') {
$el->class($this->getValue("control .$el->type"), true);
}
$el->class($this->getValue('control .error'), $control->hasErrors());
}
$s[] = $el . $description;
}
@@ -447,8 +452,12 @@ public function renderControl(Nette\Forms\IControl $control): Html
$control->setOption('rendered', true);
$el = $control->getControl();
if ($el instanceof Html && $el->getName() === 'input') {
$el->class($this->getValue("control .$el->type"), true);
if ($el instanceof Html) {
if ($el->getName() === 'input') {
$el->class($this->getValue("control .$el->type"), true);
}
$el->class($this->getValue('control .error'), $control->hasErrors());
}
return $body->setHtml($el . $description . $this->renderErrors($control));
}
@@ -13,7 +13,7 @@

<dt><label for="frm-age" class="required">Your age:</label></dt>

<dd class="odd"><input type="number" name="age" min="10" max="100" id="frm-age" required data-nette-rules='[{"op":":filled","msg":"Enter your age"},{"op":":integer","msg":"Age must be numeric value"},{"op":":range","msg":"Age must be in range from 10 to 100","arg":[10,100]}]' value="9.9" class="text"> •
<dd class="odd"><input type="number" name="age" min="10" max="100" id="frm-age" required data-nette-rules='[{"op":":filled","msg":"Enter your age"},{"op":":integer","msg":"Age must be numeric value"},{"op":":range","msg":"Age must be in range from 10 to 100","arg":[10,100]}]' value="9.9" class="text is-invalid"> •

<span class="error">
Age must be numeric value
@@ -24,7 +24,7 @@

<dt><label for="frm-gender">Your gender:</label></dt>

<dd><select name="gender" id="frm-gender"><option style="color: #248bd3" value="m">male</option><option style="color: #e948d4" value="f">female</option></select>
<dd><select name="gender" id="frm-gender" class="is-invalid"><option style="color: #248bd3" value="m">male</option><option style="color: #e948d4" value="f">female</option></select>

<span class="error">
Please select a valid option.
@@ -81,7 +81,7 @@

<dt><label for="frm-password" class="required">Choose password:</label></dt>

<dd><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text"> • <small>(at least 3 characters)</small>
<dd><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text is-invalid"> • <small>(at least 3 characters)</small>

<span class="error">
The password is too short: it must be at least 3 characters
@@ -46,6 +46,7 @@ $renderer->wrappers['pair']['container'] = null;
$renderer->wrappers['controls']['container'] = 'dl';
$renderer->wrappers['control']['container'] = 'dd';
$renderer->wrappers['control']['.odd'] = 'odd';
$renderer->wrappers['control']['.error'] = 'is-invalid';
$renderer->wrappers['control']['errors'] = true;
$renderer->wrappers['label']['container'] = 'dt';
$renderer->wrappers['label']['suffix'] = ':';

0 comments on commit 11e21e5

Please sign in to comment.