我在另一个需要从数据库填充的表单数组中有一个formArray，因此在加载表单时会显示公司数据
具有这种结构：
"groups": [
{
"defaultGroup": true,
"name": "string",
"prestationNames": [
"string"
],
}
],
所以我确实喜欢这个.ts文件：
export class UpdateSocieteComponent implements OnInit {
updateSocieteForm: FormGroup;
// societeReference: String;
listOfPrestation;
societe = {};
constructor(
private societeServ: SocieteService,
private serviceServ: ServiceService,
private formBuilder: FormBuilder,
private router: Router,
private route: ActivatedRoute
) {}
ngOnInit() {
//subscribe to route param:
this.route.paramMap.subscribe((param: ParamMap) => {
const societeReference = param.get("societeReference");
if (societeReference) {
this.getCompany(societeReference);
}
});
//init the form
this.initForm();
}
getCompany(comapnyRference) {
this.societeServ.getCompanyByReference(comapnyRference).subscribe(
data => {
console.log(data);
//pass the data to editCompany function
this.editCompany(data);
},
err => {
console.log(err);
}
);
}
//edit the company
editCompany(company) {
this.updateSocieteForm.patchValue({
name: company.name,
code: company.code,
activityField: company.activityField,
description: company.description,
domainName: company.domainName,
principalAddress: {
street: company.principalAddress.street,
postalCode: company.principalAddress.postalCode,
region: company.principalAddress.region
}
});
// polatute adresses formArray:
this.updateSocieteForm.setControl(
"addresses",
this.populateAdresses(company.addresses)
);
//populate group formArray:
this.updateSocieteForm.setControl(
"groups",
this.populateGroups(company.groups)
);
}
populateGroups(groups) {
let formArray = new FormArray([]);
groups.map(element => {
formArray.push(
this.formBuilder.group({
name: element.name,
defaultGroup: element.defaultGroup,
prestationNames: this.formBuilder.array([
this.updateSocieteForm.setControl(
"prestationNames",
this.populatePrestation(element.prestationNames)
)
])
})
);
console.log("prestation names", element.prestationNames);
});
return formArray;
}
populatePrestation(controls): FormArray {
let formArray = new FormArray([]);
console.log("contorls", controls);
controls.map(element => {
formArray.push(this.formBuilder.control(element.name));
});
console.log("form array", formArray);
return formArray;
}
populateAdresses(adresses): FormArray {
let formArray = new FormArray([]);
adresses.map(element => {
formArray.push(
this.formBuilder.group({
street: element.street,
postalCode: element.postalCode,
region: element.region
})
);
});
return formArray;
}
initForm() {
this.updateSocieteForm = this.formBuilder.group({
name: ["", [Validators.required]],
code: ["", [Validators.required, codeSocieteValidator]],
activityField: ["", [Validators.required]],
description: ["", [Validators.required]],
domainName: ["", [Validators.required]],
addresses: this.formBuilder.array([]),
groups: this.formBuilder.array([
// this.formBuilder.group({
// name: ["", [Validators.required]],
// defaultGroup: [true, []],
// prestationNames: this.formBuilder.array([])
// })
]),
principalAddress: this.formBuilder.group({
street: ["", [Validators.required]],
postalCode: ["", [Validators.required, postalCodeValidator]],
region: ["", [Validators.required]]
})
});
}
//clear field
revert() {
this.updateSocieteForm.reset();
}
get prestationNames(): FormArray {
return this.updateSocieteForm.get("prestationNames") as FormArray;
}
get prestationNamesControls() {
return this.updateSocieteForm.get("prestationNames")["controls"];
}
//get principal adress fields
get principalAdress() {
return this.updateSocieteForm.get("principalAddress") as FormGroup;
}
// get controls for principal adress fields
get principalAdressControls() {
return this.updateSocieteForm.get("principalAddress")["controls"];
}
// get form controls
get f() {
return this.updateSocieteForm.controls;
}
// get adresses formArray
get addresses(): FormArray {
return this.updateSocieteForm.get("addresses") as FormArray;
}
// get groups formArray
get groups(): FormArray {
return this.updateSocieteForm.get("groups") as FormArray;
}
// get controls for groups formArray
get groupsControls() {
return this.updateSocieteForm.get("groups")["controls"];
}
get asdressControls() {
return this.updateSocieteForm.get("addresses")["controls"];
}
addAdress() {
const newAdress = {
street: "",
postalCode: "",
region: ""
};
// this.arrayOfadresses.push(newAdress);
this.addresses.push(this.formBuilder.group(newAdress));
}
//TODO
addGroup() {
this.serviceServ.getAllprestations().subscribe(data => {
this.listOfPrestation = data;
let chekControls = this.listOfPrestation.map(element =>
this.formBuilder.control(element.name)
);
const newGroup = {
name: ["", Validators.required],
defaultGroup: false,
prestationNames: this.formBuilder.array(chekControls) // TODO : pu validation here for number of chekboxes selected
};
this.groups.push(this.formBuilder.group(newGroup));
});
}
removeGroup(index) {
this.groups.removeAt(index);
}
removeAdress(index) {
this.addresses.removeAt(index);
}
onSubmitForm() {
console.log(this.updateSocieteForm.value);
}
}
.html与组和prestationNames有关（prestationNames formArray嵌套在组formArray中）：
<div class="row" formArrayName="groups">
<div *ngFor="let group of groups.controls; let i=index"
[formGroup]="groups.controls[i]" class="row">
<div class="col-2">
<div class="form-group mt-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" formControlName="defaultGroup" >
<label class="custom-control-label" for="defaultChecked2">Groupe par defaut</label>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label
[class.text-danger]="groupsControls[i].invalid &&(groupsControls[i].touched || groupsControls[i].dirty)"
for="name"> Nom groupe</label>
<input
[class.is-invalid]="groupsControls[i].invalid &&(groupsControls[i].touched || groupsControls[i].dirty)"
class="form-control" formControlName="name" type="text">
</div>
<div *ngIf="groupsControls[i].invalid &&(groupsControls[i].touched || groupsControls[i].dirty)">
<small class="text-danger" *ngIf="groupsControls[i].invalid">
nom requis
</small>
</div>
</div>
<div class="col border col-prestations d-flex flex-row" formArrayName="prestationNames">
<div class="row" *ngFor="let prestation of group.get('prestationNames').controls; let nameIndex=index"
>
<div class="col-5">
<div class="form-group">
<div class="checkbox">
<label><input [formControlName]="nameIndex" value="nameIndex" type="checkbox">{{nameIndex.controls}}</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-2 mt-2">
<div class="form-group">
<button
type="button"
class="btn btn-default mt-4 add-remove-button group-button"
(click)="removeGroup(i)"
>
-
</button>
</div>
</div>
</div>
我认为我正确地填充了prestationNames formArray，这是我使用populatePrestation方法填充时从控制台获取的信息：
公司有两个组，name和defaultGroup字段已加载并正确显示。 我的问题是prestationNames：它显示在控制台中，所以我认为它的数据已正确加载 但以形式错误地绑定。 我想念东西
