<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Omschrijving situatie</label>
<textarea name="textArea" class="form-control is-invalid" rows="7" placeholder="Omschrijving situatie"></textarea>
</div>
<div class="{% if comment == false %}form-group {% endif %}d-flex flex-wrap{% if button %} position-relative{% endif %}">
<label class="flex-grow-1">{{label}}</label>
{% render '@textarea', {label:label, invalid:invalid, valid:valid, disabled:disabled, readonly:readonly, add_field:add_field, rows:rows, comment:comment, text:text, placeholder:placeholder}, true %}
{% if show_feedback %}<div class="{% if valid %}valid-feedback{% endif %}{% if invalid %}invalid-feedback{% endif %}{% if feedback_message %} d-inline-block{% endif %}"><strong>{{feedback_message}}</strong></div>{% endif %}
</div>
{
"label": "Omschrijving situatie",
"invalid": true,
"valid": false,
"feedback_message": "Textarea is invalid",
"show_feedback": false,
"disabled": false,
"readonly": false,
"button": false,
"rows": 7,
"comment": false,
"text": "",
"add_field": false
}
When a field is invalid or valid, the class .is-invalid or .is-valid should be added to the field. If a feedback message should be displayed please look at the following example:
<textarea name="textArea" class="form-control is-invalid" rows="7" placeholder="Omschrijving situatie"></textarea>It is also possible to already add the feedback div to the HTML before the message is displayed to the user. This is because the .invalid-feedback or .valid-feedback are hidden by default. By adding the class .d-inline-block it will be visible.