Как получить и отправить форму в Angular 6, созданную шаблоном Django

Question

У меня есть приложение Angular 6, и я пытаюсь отобразить и отправить форму, сгенерированную из Django. Я извлекаю форму и отображаю ее используя innerHtml. Он отображается нормально, но когда я нажимаю кнопку «Отправить», он не вызывает функцию, которую я к нему прикрепил. Если я скопирую и вставлю сгенерированный html, то кнопка отправки будет работать нормально (хотя я получаю ответ 403, думаю, из-за копирования и вставки токена CSRF). Вот код для моего компонента Angular и файлов шаблонов, а также шаблон Django:

login.component.html

<div *ngIf="!loggedIn; else successMessage" [innerHTML]="loginForm"></div>

<ng-template #successMessage>
  Logged in
</ng-template>

login.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  @Input() loggedIn: boolean;
  id_username: string;
  id_password: string;

  loginForm: SafeHtml;

  constructor(private router: Router, private httpClient: HttpClient, private sanitizer: DomSanitizer) {
  }

  ngOnInit() {
    this.getLoginForm();
  }

  getLoginForm() {
    this.httpClient.get('https://myserver/account/login/', { responseType: 'text' }).subscribe(res => {
      this.loginForm = this.sanitizer.bypassSecurityTrustHtml(res);
      console.log(this.loginForm);
    });
  }

  login() {
    console.log("Logging in user");
    var response = this.httpClient.post('https://myserver.com/account/login/', {
      id_username: this.id_username,
      id_password: this.id_password
    }).subscribe(res => {
      this.loggedIn = true;
    });
  }
}

form.html Django template

{% extends "share/base.html" %}
{% block content %}
<div>
{% if form %}
    {% if form.errors %}
        <font color="red">{{ form.errors }}</font>
    {% endif %}
    <form #bdmForm="ngForm">
        {% csrf_token %}
        {% for field in form %}
            <div class="form-group">
                {{ field.label_tag }}
                {{ field }}
            </div>
        {% endfor %}
        <button type="button" class="btn btn-default" (click)="login()">Submit</button>
    </form>
{% endif %}
</div>
{% endblock %}

forms.py (для включения полей) # - - кодировка: utf-8 - - будущее импорт unicode_literals из форм импорта django

class Login(forms.Form):
    username = forms.CharField(required=True, widget=forms.TextInput(attrs={'[(ngModel)]': 'id_username'}))
    password = forms.CharField(required=True, widget=forms.PasswordInput(attrs={'[(ngModel)]': 'id_password'}))

Я также пытался включить функцию login (), используя (ngSubmit)="login()" в теге формы, но это тоже не работает.

Я относительно новичок в Angular, и кто-то еще работает на стороне Django. Я не уверен, нужно ли мне вносить небольшие изменения или если весь наш подход неверен, но любой вклад будет отличным!

Answer 1

Я бы попытался изменить кнопку на <input type="submit" .... >, а затем подключить (submit) к элементу, с которым вы связали [innerHtml] Так что в основном я бы использовал всплывающее событие.

Но, честно говоря, это плохая практика, и вы не должны получать html с вашего сервера в вашем Angular Component. Короче говоря, вы должны создать свою форму на Angular и отправить HTTP-запрос POST и соответственно отреагировать на ответ в вашем Angular Component.

Если это невозможно, я думаю, что способ подключиться к вещам в вашем innerHtml - через всплывающее окно событий или во время выполнения путем ссылки на него через document.getElementBySomething и назначения обратных вызовов для событий.

Оба способа чувствуют себя хакерами