diff --git a/curriculum/section14/lectures/14_edit_movies_pre_populate_wtform/README.md b/curriculum/section14/lectures/14_edit_movies_pre_populate_wtform/README.md index 4accea78..30e073b6 100644 --- a/curriculum/section14/lectures/14_edit_movies_pre_populate_wtform/README.md +++ b/curriculum/section14/lectures/14_edit_movies_pre_populate_wtform/README.md @@ -54,7 +54,22 @@ Note that the form pre-population mechanism is the `obj=movie` part. ## Rendering the extended movie form -Let's create the `templates/movie_form.html` template: +First, let's edit the `templates/macros/fields.html` template to add the a new macro in order to render the custom field: + +```jinja2 +{% macro render_area_field(field) %} +
+ {{ field.label(class_="form__label") }} + {{ field(rows=4, class_="form__field", style="resize: none") }} + + {%- for error in field.errors %} + {{ error }} + {% endfor %} +
+{% endmacro %} +``` + +And then create the `templates/movie_form.html` template: ```jinja2 {% from "macros/fields.html" import render_text_field, render_area_field %} @@ -90,6 +105,32 @@ Let's create the `templates/movie_form.html` template: {% endblock %} ``` +Finally we can update the anchor tags in the `templates/movie_details.html` template since we now can edit the fields: + +```diff +... + {% else %} +

Not watched yet

+ {% endif %} +- Edit {{ pencil("pencil") }} ++ Edit {{ pencil("pencil") }} + + +
+... +``` + +```diff +... + {% if movie.description %} +

{{ movie.description }}

+ {% else %} +-

No description yet. Add one?

++

No description yet. Add one?

+ {% endif %} +... +``` + Also nothing new here! Note that our custom WTForm field is identical to the `TextAreaField`, except when it comes to receiving form data and putting it in our Python object. Everything else behaves the same way as the parent class.