No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Mostrando el form en el template

25/37
Recursos

Existen diferentes formas en las que se pueden mostrar los valores del form, estas son: as_table, as_p y as_ul. Tambi茅n se pueden mostrar campos de manera individual, incluso customizar las clases que se van a usar para mostrar los errores, etc. Refinaremos la apariencia del form a trav茅s de algunas refactorizaciones en el template.

Aportes 25

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

En Vscode pueden usar la ext Djaneiro para que el codigo html se vea mejor.

Tambi茅n podr铆amos mejorar formularios a trav茅s de Django Crispy Forms, sin dejar de lado la legibilidad del c贸digo Pythonico.

https://django-crispy-forms.readthedocs.io/en/latest/

como coloco esos errors en espa帽ol?

La primera vez que escucho que a # le dicen gato!! En Argentina le decimos numeral, y aca en Espa帽a, donde vivo ahora le dicen almohadilla! Pero, gato nunca la habia escuchado!

Django me habia gustado mucho hasta el punto de tener que ocuparlo para hacer las vistas, creo que me quedare con el solo para el lado del back

Veo que siempre el form le pide colocar una fotograf铆a, tenga o no el usuario, 驴c贸mo recomiendan hacerle para que no la pida siempre, si es que ya tiene una el usuario?

A帽adi este codigo al nav y form asi cuando la persona agregue su imagen personal se actualice automaticamente

{% if request.user.profile.picture %}
            <div
              class="container rounded-circle"
              style="width: 30px;
                  height: 30px;
                  background-image: url('{{request.user.profile.picture.url}}');
                  background-size: cover;"
            ></div>
            {% else %}
            <img
              src="{% static 'img/default-profile.png' %}"
              class="rounded-circle"
              width="30"
              alt="Default profile picture"
            />
            {% endif %}

En Vscode pueden usar la ext Django para que el codigo se vea mejor.

Me est谩 encantando este curso! Los formularios siempre me hab铆an parecido muy complejos en django pero est谩 super sencillo de entender, qu茅 divertido

{% extends "base.html" %}
{% load static %}

{% block head_content %}
<title>@{{ request.user.username }} | Update profiles</title>
{% endblock %}

{% block container %}

<div class="container">

    <div class="row justify-content-md-center">
        <div class="col-6 p-4"id="profile-box">
            <form action="{% url 'update_profile' %}" method="POST" enctype="multipart/form-data">
                {% csrf_token %}

              
                <div class='media'>
                    {%if profile.picture %}
                    <img src="{{ profile.picture.url }}" class="rounded-circle" height="50"/>
                    {% else %}
                      <img src="{% static 'img/default-profile.png' %}" class="rounded-circle" height="50"/>
                    {% endif %}

                    <div class="media-body">
                        <h5 class="ml-4"> @{{ user.username }} | {{ user.get_full_name }} </h5>
                        <p class="ml-4"><input type="file" name="picture" required="true"></p>
                    </div>
                </div>

                {% for error in form.picture.errors %}
                <div class="alert alert-danger">
                    <b>Picture: </b>{{error}}
                 </div> 
                {% endfor %}
                 

                <hr><br>

                <div class="form-group">
                    <label>Website</label>
                    <input class="form-control {% if form.website.errors %} is-invalid {% endif %}"
                            type="text"
                            name="website"
                            placeholder="Website"
                            {#si ocurre un error, igual muesstra el valor ingresado --sino muestra el valor por defecto#}
                            value="{% if form.errors %} {{form.website.value}} {% else %} {{ profile.website }} {% endif %}"
                            />
                          <div class="invalid-feedback">
                            {% for error in form.website.errors %} 
                            {{error}}
                            {% endfor %}
                          </div>
                </div>
            
                <div class="form-group">
                    <label>Biography</label>
                    {#si ocurre un error lo muestra#}
                    <textarea 
                    class="form-control {% if form.biography.errors %} is-invalid {% endif %}" 
                    name="biography">
                    {% if form.errors %} {{form.biography.value}} {% else %} {{ profile.biography }} {% endif %}
                    </textarea>
                    {#ac谩 muestra el error dentro de div en un cuadro rojo, con la descipcion#}
                    <div class="invalid-feedback">
                        {% for error in form.biography.errors %} 
                        {{error}}
                        {% endfor %}
                      </div>
                </div>

                <div class="form-group">
                    <label>Phone number</label>
                    <input
                        class="form-control {% if form.phone_number.errors %} is-invalid {% endif %}"
                        type="text"
                        name="phone_number"
                        {% if form.errors %} {{form.phone_number.value}} {% else %} {{ profile.phone_number }} {% endif %}
                        placeholder="Phone number"
                        value="{{ profile.phone_number }}"
                    />
                    <div class="invalid-feedback">
                        {% for error in form.phone_number.errors %} 
                        {{error}}
                        {% endfor %}
                      </div>
              </div>

                <button type="submit"class="btn btn-primary btn-block mt-5">Update info</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

Me parece que phone_number no tiene una validaci贸n apropiada para un n煤mero (por ser CharField) as铆 que cuidado con rellenarlo con letras sin querer.

PD: Supongo que lo resolver谩 m谩s adelante.

Alguien tiene problemas con el textarea de la biograf铆a, a mi me aparecen muchos espacios en blanco antes y despu茅s del mensaje, y mientras mas lineas de c贸digo de {% if鈥 %} pongo, mas aparecen 馃槙

Necesitamos llevar las propiedades del form al front-end.

Excelente gracias

C贸mo podr铆a autocompletar con formulario, a partir del valor de determinado input?

Excelente vamos avanzando y es muy amigable el manejo de forms!

gracias pablo, si hagamos el codigo de una forma mas elegante, pq de este forma hay mucho repetido DRY

Porque cuando envio varias veces el form vacio se cambia la imagen a la default?

Como puedo hacer para que se corte la imagen en cuadrado al subirla?

驴Alguien me podr铆a explicar cuando se debe usar: {{ }} y {% %} ?
Gracias 馃槂 鉂わ笍

Hola, tengo una duda, 驴Como puedo pintar los errores de un formulario pero en espa帽ol?

Esta algo complicado pero entendible aqui el link de la documentacion de la clase:

Existen diferentes formas en las que se pueden mostrar los valores del form, estas son: as_table, as_p y as_ul. Tambi茅n se pueden mostrar campos de manera individual, incluso customizar las clases que se van a usar para mostrar los errores, etc. Refinaremos la apariencia del form a trav茅s de algunas refactorizaciones en el template.

Cuando imprime el error de un campo del formulario [form.website.error], 驴Cu谩l es la referencia al nombre [form. website .error]?

  • es a la etiqueta <label>Website</label>
    -es al atributo name del input <input name=鈥渨ebsite鈥>
  • o cual???

Alguien pudo ver lo que explica al final de no repetir el c贸digo cada vez?