时间戳

首页 > 解决方案 > 从 django 模型表单中删除字段会破坏 HTML 中的格式

html - 从 django 模型表单中删除字段会破坏 HTML 中的格式

问题描述

从我的 forms.py django 表单中删除一个字段会删除格式，尽管表单可以正常工作。如果我删除“useremail”（因为它现在与标准 django 用户模型电子邮件配对），所有格式/占位符等都会从 HTML 中的所有字段中删除。如果我删除 4 个字段中的任何一个，就会发生这种情况。

所有表单都可以工作，尽管它失去了对属性和样式的任何控制。图 1显示了包含以下所有内容的 html（这很好用）。如果我从 forms.py 中删除“useremail”，格式会中断，如图2 所示。

控制台中没有错误消息标志

表格.py

class CreateUserForm(UserCreationForm):
    password2 = None

    class Meta:
        model = User
        fields = ['username', 'email', 'password1']

    def clean_password1(self):
        password1 = self.cleaned_data.get('password1')
        try:
            password_validation.validate_password(password1, self.instance)
        except forms.ValidationError as error:

            # Method inherited from BaseForm
            self.add_error('password1', error)
        return password1

class SafezoneForm(forms.ModelForm, admin.ModelAdmin):
    name = forms.CharField(label='Safezone name',widget=forms.TextInput
    (attrs={'id': 'name', 'label': 'Name of Safezone', 'class': 'form-inputs'}))

    useremail = forms.CharField(label='Your Email', widget=forms.EmailInput
    (attrs={'id': 'useremail','class': 'form-inputs',"placeholder": "mike@xyz.com"}))

    latitudecentre = forms.FloatField(label='Marker Latitude',widget=forms.TextInput
    (attrs={'id': 'latitudecentre','class': 'form-inputs', 'readonly': True}))
    longitudecentre = forms.FloatField(label='Marker Longitude',widget=forms.TextInput
    (attrs={'id': 'longitudecentre','class': 'form-inputs', 'readonly': True}))

    class Meta:
        model = Safezone

模型.py

class Safezone(models.Model):
    userid = models.OneToOneField(User, on_delete=models.CASCADE, null=True)
    useremail = models.EmailField(User, null=True)
    name = models.CharField(max_length=100, null=True)
    latitudecentre = models.FloatField(null=True)
    longitudecentre = models.FloatField(null=True)
    latcorner1 = models.FloatField(null=True)
    

    def save(self, *args, **kwargs):

        self.latcorner1 = self.latitudecentre + 0.1

        super(Safezone, self).save(*args, **kwargs)

    def __str__(self):
        return str(self.userid) or ''

视图.py

def collapsecard(request):
    if request.method == 'POST':
        create_user_form = CreateUserForm(request.POST)
        safezone_form = SafezoneForm(request.POST)

        if create_user_form.is_valid() and safezone_form.is_valid():
            user = create_user_form.save()
            safezone = safezone_form.save(commit=False)

            safezone.userid = user
            safezone.useremail = user.email
            safezone.save()
            return redirect('login')

        return redirect('safezoneaddedpage')

    else:
        create_user_form = CreateUserForm()
        safezone_form = SafezoneForm()
    return render(request, 'V2maparonno_create_safe_zoneV2.html',
                  {'create_user_form': create_user_form, 'safezone_form': safezone_form})

HTML / 模板文件提取

<div id="accordion">

  <div class="card" style="width: 23rem;">
    <div class="card-header" id="headingOne">
      <p class="mb-0">
        <div class="accordianstandard" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          xxx
        </div>

    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <img src="https://pupaprojectawsbucket.s3.eu-west-2.amazonaws.com/aus.png" width="120" height="120" class="cardimage" alt="australia bushfire alert">
        <p>xxx.</p>
        <p>Drag the marker over your home.</p>
        <div style="padding-left: 30%;">
              <button class="btn btn-sm btn-outline-primary" type="button" value="clickme" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Next</button>
              &nbsp;&nbsp;&nbsp;
              <button class="btn btn-sm btn-outline-secondary" type="button" id="reset-btn">Reset</button>
        </div>

      </div>
    </div>
  </div>


  <div class="card" style="width: 23rem;">
      <div class="card-header" id="headingTwo">
        <p class="mb-0">
          <div class="accordianstandard" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Safezone notification
          </div>

      </div>

      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
              <form action="" method="POST" class="form-control">
                  {% csrf_token %}
                  {{safezone_form.as_p}}
                  {{create_user_form.as_p}}
                  <input class="btn btn-sm btn-outline-primary" type="submit" name="Submit">
                &nbsp;&nbsp;&nbsp;
                  <button class="btn btn-sm btn-outline-secondary" type="button">Reset</button>
                  <div class="disclaimer">
                      <p>By clicking submit you agree to receiving email alerts from pupa.</p>
                  </div>

              </form>
      </div>

  </div>
</div>

CSS

   body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Helvetica Neue', Helvetica Bold;
}



.navbar-custom-mobile {
            background-color: black;
             padding: 30px;
}

.navbar-custom-mobile .navbar-brand,
.navbar-custom-mobile .navbar-text {
            color: white;
}

.navbar-custom {
            background-color: black;
             padding: 50px;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
            color: white;
}

#map {
  position: absolute;
  top: 100px;
  bottom: 0%;
  width: 100%;
}

h1 {
  font-size: 20px;
  line-height: 30px;
}

h2 {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #2dc4b2;
}



#geocoder-container > div {
min-width: 50%;
margin-left: 25%;
}

.coordinates {
background: rgba(0, 0, 0, 0.5);
color: #fff;
position: absolute;
bottom: 70px;
left: 10px;
padding: 5px 10px;
margin: 0;
font-size: 11px;
line-height: 18px;
border-radius: 3px;
display: none;
}


.card-deck {
  position: relative;
  top: 550px;
  padding: 20px;
}

.card { position: relative;
  top: 20px;
  left: 20px;
  padding: 0px;
  }


.mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }


.mobileShow {display: none;}
  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
      .mobileShow {display: inline;}
  }
.cardmobile { position: absolute;
  bottom: 1px;
  left: 2%;
  font-size: 14px;
  }

.card-bottom-custom-mobile {
  padding: 12px;
  padding-left: 15px;
  padding-top:12px;
  padding-bottom:12px;
  background: white;
  color: black;
  font-family: 'Helvetica Neue', Helvetica Bold;
  font-size: 14px;
  }

.card-header-custom-mobile {
  padding: 18px;
  padding-left: 15px;
  padding-top:15px;
  padding-bottom:8px;
  background: black;
  color: white;
  }


.card-header-custom {
  padding: 15px;
  padding-left: 20px;
  padding-top:20px;
  background: black;
  color: white;
  }


.card-bottom-custom {
  padding: 20px;
  padding-left: 20px;
  padding-top:20px;
  padding-bottom:20px;
  background: white;
  color: black;
  }




.form-inputs {
  color: black;
  font-family: 'Helvetica Neue', Helvetica Bold;
  font-size: 13px;
  padding-right: 50%;
  padding-left:5%;
  padding-top: 5%;
  padding-bottom: 5%;
  margin-left: 0%;
  }

.form-control {
  color: black;
  font-family: "Helvetica Neue", Helvetica, Ariel;
  font-size: 13px;
  font-weight: bold;
  color: #666666;
  padding-right: 150px;
  padding-left: 70px;
  padding-top: 20px;
  }

.accordianstandard {
  color: black;
  font-family: "Helvetica Neue", Helvetica, Ariel;
  font-size: 13px;
  font-weight: bold;
  color: #666666;
  padding-right: 20px;
  padding-left: 10px;
  padding-top: 0px;
  }

.card-body {
  color: black;
  font-family: "Helvetica Neue", Helvetica, Ariel;
  font-size: 15px;
  font-weight: normal;
  padding-left: 30px;
  padding-right: 30px;
  color: #666666;
  }

.disclaimer {
    padding-top: 7px;
    font-family: "Helvetica Neue", Helvetica, Ariel;
    font-size: 9px;
    font-weight: normal;
    }


map.addLayer({
'id': 'point1',
'type': 'circle',
'source': 'point',
'paint': {
'circle-radius': 6,
'circle-color': '#ff8304'
}
});

.divider{
    width:5px;
    height:auto;
    display:inline-block;
}

.marker-div {
    cursor: move;
}

.marker-div img {
    height:110px;
    width:55px;
}

.cardimage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 40%;
}

标签： htmldjangodjango-modelsdjango-forms

解决方案

您的班级缺少fields属性。Django 应该在这里抛出一个异常，就我而言，这正是发生的事情。请参阅以下内容：SafezoneFormMeta

Creating a ModelForm without either the 'fields' attribute or the 'exclude' attribute is prohibited; form SafezoneForm needs updating.

所以，我已经删除了useremail字段并将fields属性添加到SafezoneForm'sMeta类。这是它现在的样子：

class SafezoneForm(forms.ModelForm, admin.ModelAdmin):
name = forms.CharField(label='Safezone name', widget=forms.TextInput(attrs={'id': 'name', 'label': 'Name of Safezone', 'class': 'form-inputs'}))
latitudecentre = forms.FloatField(label='Marker Latitude', widget=forms.TextInput(attrs={'id': 'latitudecentre', 'class': 'form-inputs', 'readonly': True}))
longitudecentre = forms.FloatField(label='Marker Longitude', widget=forms.TextInput(attrs={'id': 'longitudecentre', 'class': 'form-inputs', 'readonly': True}))

class Meta:
    model = Safezone
    fields = ['name', 'latitudecentre', 'longitudecentre']

它似乎对我有用。确保您是最新的 Django 版本。

推荐阅读