【发布时间】：2020-10-29 23:00:47
【问题描述】：
我正在做一个 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>
【问题讨论】：
标签： javascript angular forms clone