DefaultFormRenderer: Add control .error class (#209)

Bootstrap 4 marks invalid controls with is-invalid class.
Let’s allow to set this class in DefaultFormRenderer.

Author: jtojnar

examples/bootstrap4-rendering.php

@@ -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');

src/Forms/Rendering/DefaultFormRenderer.php

@@ -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));
 	}

tests/Forms/Forms.renderer.2.expect

@@ -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

tests/Forms/Forms.renderer.2.phpt

@@ -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'] = ':';