Динамическое поле выбора в django возвращает форму недействительной

У меня есть форма с одним полем select, при загрузке страницы я отправляю ajax запрос для получения категорий компаний текущего пользователя. До этого момента все работает как ожидалось, но когда я отправляю форму, она возвращает form-invalid. Я не очень хорошо знаком с формами django. Я буду очень признателен, если вы сможете понять, что не так с моим кодом

MODEL
class Expense(models.Model):
    slug = models.SlugField(max_length=80, unique=True)
    debit = models.DecimalField(decimal_places=2, max_digits=10)
    date = models.DateTimeField(default=timezone.now)
    category = models.CharField(max_length=50, choices=())
    remark = models.CharField(max_length=50, validators=[MinLengthValidator(3)])
    company = models.ForeignKey(Company, on_delete=models.CASCADE)

VIEW
def expense_types(request, company_id):
    company = Company.objects.filter(company_id=company_id).first()
    types = ExpenseType.objects.filter(company=company).all()
    output = []
    for typ in types:
        data = {}
        data['category'] = typ.category
        output.append(data)
    return JsonResponse({'categories': output})

URL
path('<str:company_id>/ExpenseTypes', views.expense_types, name='get-expense-types')

TEMPLATE
<form method="POST" action="" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form|as_crispy_errors }}
    <div class="row">
       <div class="col-md-6 col-sm-6">
           {{ form.date|as_crispy_field }}
       </div>
       <div class="col-md-6 col-sm-6">
           {{ form.debit|as_crispy_field }}
       </div>
    </div>
    <div class="row">                            
       <div class="col-md-6 col-sm-6">
           {{ form.category|as_crispy_field }}
           <input type="hidden" id="company_id", value="{{ user.company.company_id }}">
       </div>
       <div class="col-md-6 col-sm-6">
            {{ form.remark|as_crispy_field }}
       </div>
    </div>                          
    <div class="form-group">
         <button class="btn btn-outline-warning btn-block" type="submit">Save</button>
    </div>
</form>

<script type="text/javascript">
        let category = document.getElementById('id_category')
        let company_id = document.getElementById('company_id').value
        fetch('/' + company_id + '/ExpenseTypes').then(function(response){
            response.json().then(function (data){
                let optionHTML = ''
                for (let type of data.categories){
                    optionHTML += '<option value="' + type.category + '">' + type.category + '</option>'
                }
                category.innerHTML = '<option value="' + 1 + '" selected>-- Please choose expense type --</option>' + optionHTML
            })
        })
    </script>```



Here is the screen shoot of when I submit the form


  [1]: https://i.stack.imgur.com/0pIG2.png

Вернуться на верх