Angular клон формы не отправляет данные. Но родительская форма делает

Question

Я работаю над проектом angular, в котором таблица клонируется на основе количества должников из первой формы. Итак, предположим, что первая форма требовала включения 3 должников, следующая форма сгенерирует 3 формы. Но когда вы пытаетесь сохранить данные из клонированных форм, это не работает, а первая форма работает только там, откуда пришел клон.

  **MY TS FILE**
import { Component, OnInit } from "@angular/core";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { HttpClient } from "@angular/common/http";
import { Router } from "@angular/router";
import * as $ from 'jquery';


@Component({
selector: "app-annex",
templateUrl: "./annex.component.html",
styleUrls: ["./annex.component.css"],
})
export class AnnexComponent implements OnInit {
annexform: FormGroup;
id: any;
data = [];
decreaseDebtor: number;
alert: boolean = false;
alertUnsuccesful: boolean = false;
// annexForm: boolean = true;
// debtors_included: number;
myDebtors: any;
debtorsCount = 0;
// submitted = false;
// myDebtorsSubmit : number;
constructor(
 public fb: FormBuilder,
 private http: HttpClient,
 private router: Router
) {
 this.annexform = this.fb.group({
   debtor_name: ["", Validators.required],
   debtor_contact_person: ["", Validators.required],
   debtor_function: ["", Validators.required],
   debtor_address: ["", Validators.required],
   debtor_email: ["", [Validators.required, Validators.email]],
   debtor_phone_number: ["", Validators.required],
   debtor_proposed_limit: ["", Validators.required],
   debtor_invoice_term: ["", Validators.required],
   debtor_projected_turnover: ["", Validators.required],
   debtor_ledger: [null, Validators.required],
   client: Number,
 });
}
uploadLedgerFile(event: { target: HTMLInputElement }) {
 const file = (event.target as HTMLInputElement).files[0];
 this.annexform.patchValue({
   debtor_ledger: file,
 });
 this.annexform.get("debtor_ledger").updateValueAndValidity();
}

// convenience getter for easy access to form fields
get f() {
 return this.annexform.controls;
}

submitAnnexForm() {
 console.log(this.annexform.value)
 if (this.annexform.invalid) {
   return;
 }
 let formData: any = new FormData();
 formData.append("debtor_name", this.annexform.get("debtor_name").value);
 formData.append(
   "debtor_contact_person",
   this.annexform.get("debtor_contact_person").value
 );
 formData.append(
   "debtor_function",
   this.annexform.get("debtor_function").value
 );
 formData.append(
   "debtor_address",
   this.annexform.get("debtor_address").value
 );
 formData.append("debtor_email", this.annexform.get("debtor_email").value);
 formData.append(
   "debtor_phone_number",
   this.annexform.get("debtor_phone_number").value
 );
 formData.append("debtor_proposed_limit", this.annexform.get("debtor_proposed_limit").value);
 formData.append("debtor_invoice_term", this.annexform.get("debtor_invoice_term").value);
 formData.append("debtor_projected_turnover", this.annexform.get("debtor_projected_turnover").value);
 formData.append("debtor_ledger", this.annexform.get("debtor_ledger").value);
 formData.append("client", localStorage.getItem("id"));
 return this.http
   .post<{ id: string }>("http://127.0.0.1:8000/api/annex/", formData)
   .subscribe(
     (result) => {
       console.log(result); 
ngOnInit() {
 let retrievedObject = localStorage.getItem("id");
 console.log(retrievedObject);
 this.http
   .get<any>(`http://127.0.0.1:8000/api/create-client/${retrievedObject}/`)
   .subscribe(
     (res) => {
       this.decreaseDebtor = res.debtors_included;
       localStorage.setItem("debtors_included", res.debtors_included);
       this.myDebtors = JSON.parse(localStorage.getItem("debtors_included"));
       this.debtorsCount = JSON.parse(localStorage.getItem("debtors_count"));
       console.log(this.decreaseDebtor);
       console.log(this.myDebtors);
     },
     (error) => console.log(error)
   );
 $(document).ready(function () {
   let debtors = JSON.parse(localStorage.getItem("debtors_included"));
   let e = $(".rowToClone");
   for (let i = 0; i <= debtors-2; i++) {
     e.clone().insertAfter(e)
   }
 $(document).find(".rowToClone").trigger("create")
 });
}
}
  

ЭТО МОЙ HTML ФАЙЛ

      <div id="myDiv">
        <form class="rowToClone table-form" name="annexForm" [formGroup]="annexform" (ngSubmit)="submitAnnexForm($event)" onsubmit="event.preventDefault()" >
          <table class="table">
            <!--Table body-->
            <tbody class="annex-body">
              <tr>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    type="text"
                    formControlName="debtor_name"
                    required
                    id="debtor_name"
                  />
                </td>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    type="text"
                    formControlName="debtor_contact_person"
                    required
                    id="debtor_contact_person"
                  />
                </td>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    type="text"
                    class="table-head-data3"
                    formControlName="debtor_function"
                    required
                    id="debtor_function"
                  />
                </td>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    type="text"
                    formControlName="debtor_address"
                    required
                    id="debtor_address"
                  />
                </td>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    type="email"
                    formControlName="debtor_email"
                    required
                    id="debtor_email"
                  />
                </td>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    type="text"
                    formControlName="debtor_phone_number"
                    required
                    id="debtor_phone_number"
                  />
                </td>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    type="text"
                    formControlName="debtor_proposed_limit"
                    required
                    id="debtor_proposed_limit"
                  />
                </td>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    type="text"
                    formControlName="debtor_invoice_term"
                    required
                    id="debtor_invoice_term"
                  />
                </td>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    type="text"
                    formControlName="debtor_projected_turnover"
                    required
                    id="debtor_projected_turnover"
                  />
                </td>
                <td class="table-input-data">
                  <input
                    class="my-input"
                    id="debtor_ledger"
                    type="file"
                    (change)="uploadLedgerFile($event)"
                    required
                  />
                </td>
                <td class="table-input-data">
                  <button
                    class="my-input"
                    class="mybutton"
                    id="submit"
                    type="submit"
                  >
                    Save
                  </button>
                </td>
              </tr>
            </tbody>
            <!--Table body-->
          </table>
        </form>
      </div>

Answer 1

Я вижу здесь ряд проблем.

• у вас есть метод обратного вызова ngInit, вызываемый внутри подписки на HTTP-запрос к данным POST. это либо копия и прошлая ошибка, либо вам действительно нужно убрать это из подписки.
• Как правило, angular не рекомендует напрямую манипулировать DOM, как это делает ваш код.

из того, что я могу сказать,

• вы манипулируете DOM, чтобы иметь возможность иметь динамические c формы, которые реагируют на события использования
• тогда вы пытаетесь получить доступ к этим клонированным элементам в классе

Причина, по которой ваши клонированные формы никогда не будут доступны в классе, заключается в том, что вы напрямую манипулируете DOM вместо создания объектов в классе .

т.е. клонирование элемента DOM формы НЕ сделает его доступным для использования в классе.

вы можете получить пользу от прохождения формы Dynami c формы на angular .io, если вы еще этого не сделали.

Я бы предложил либо вложить FormGroups, либо использовать FormArray. используя nestedFormGroups в качестве примера, вы могли бы сделать что-то вроде

constructor(
 public fb: FormBuilder,
 private http: HttpClient,
 private router: Router
) {
  this.annexForm = this.fb.group( {
     vendor1: this.fb.group(this.getVendorFormFields() ),
     vendor1: this.fb.group(this.getVendorFormFields() )
  });
}

getVendorFormFields() {
  return {
    debtor_name: ["", Validators.required],
    debtor_contact_person: ["", Validators.required],
    debtor_function: ["", Validators.required],
    debtor_address: ["", Validators.required],
    debtor_email: ["", [Validators.required, Validators.email]],
    debtor_phone_number: ["", Validators.required],
    debtor_proposed_limit: ["", Validators.required],
    debtor_invoice_term: ["", Validators.required],
    debtor_projected_turnover: ["", Validators.required],
    debtor_ledger: [null, Validators.required],
    client: Number,
  };
}

, это позволяет вам сохранять определенные c formGroups для каждого поставщика и позволяет изолировать проверку в шаблоне HTML (если это это то, что вам нужно).

альтернативным подходом, который может упростить управление, было бы создание VendorForm Component. в этом компоненте имейте форму и любую требуемую проверку. это позволит вам отделить logi c, которые получают / устанавливают данные из формы. этот тип разделения значительно упростит управление вашим кодом и позволит вам более легко управлять добавлением / удалением поставщиков и иметь одинаковые элементы управления вводом формы для каждого.

в отдельной заметке, вы можете сэкономить немного кода используя form.getRawValue() в форме. это будет эффективно делать то же самое, что вы делаете со всеми вашими .appendData методами. он принимает форму и возвращает объект JSON, содержащий пары имя / значение. затем вы можете передать это в свой HTTP-запрос.

короткая версия, я думаю, здесь заключается в том, что вы пытаетесь что-то «обойти» angular, чтобы получить то, что вы хотите. Я бы посоветовал следовать примерам форм Dynami c, предоставленным angular. не должно быть никаких причин манипулировать DOM, как вы сейчас делаете.

Надеюсь, что-то из этого поможет. удачи