Вот мой машинописный код. Я пытаюсь создать свою форму на основе значений, извлеченных из базы данных.
В этом случае у меня есть три записи, для которых мне нужно создать 3 строки элементов управления формы и заполнить данные этими элементами управления.
Во время отладки я мог видеть значения внутри шаблона Controls->items->controls->Formgroup (0, 1, 2) ->controls->All the control name listed
contactInit() {
this.getInternationalCodeList();
this.contactRecords = this.travelConsData && this.travelConsData.travelAgentContactDtoList
? this.travelConsData.travelAgentContactDtoList : [];
this.addContactForm = this.fb.group({items: this.fb.array([])});
this.buildContactControlls(this.contactRecords);
}
buildContactControlls(contactRecords) {
const items = <FormArray>this.addContactForm.get('items') as FormArray;
for (const contactRows of contactRecords) {
items.push(this.buildContactForm(contactRows));
}
}
buildContactForm (contactRecords: TravelConsultantContact) {
return this.fb.group({
primaryContact: new FormControl([{value: contactRecords.primaryContactInd}]),
remitStatement: new FormControl([{value: contactRecords.remittanceContactInd}]),
role: new FormControl([{value: contactRecords.contactRoleCode}]),
contactName: new FormControl([{value: contactRecords.contactName}]),
emailAddress: new FormControl([{value: contactRecords.contactEmailId}]),
phoneNumber: new FormControl([{value: contactRecords.busPhoneNumber}]),
Source: new FormControl([{value: contactRecords.sourceCd}])
});
}
get formData() {
return <FormArray>this.addContactForm.get('items');
}
HTML, как показано ниже.
<ngb-tab id="contact" title="Contacts">
<ng-template ngbTabContent>
<div class="table-responsive mt-4">
<form [formGroup]="addContactForm" >
<div class="form-group">
<button class="btn btn-default float-right" (click)="addEmptyRowForNewContact()">
<i class="fas fa-plus-circle" aria-hidden="true"></i>
Add New Contact
</button>
<table class="table table-striped table-borderless">
<thead>
<tr class="table-header-border">
<th class="text-center">Primary</th>
<th class="text-center">Remit</th>
<th>Role</th>
<th>Name</th>
<th>Email Address</th>
<th>Phone Number</th>
<th>Source</th>
<th>Action</th>
</tr>
</thead>
<ng-container formArrayName="items">
<tbody *ngFor="let contactRow of formData.controls; let i=index">
<tr [formGroupName]="i">
<td class="text-center" class="form-group">
<input type="checkbox"
id="{{ 'primaryContact-' +i }}"
class="form-control"
formControlName="primaryContact">
</td>
<td class="text-center" class="form-group">
<input type="checkbox"
id="{{ 'remitStatement-' +i}}"
class="form-control"
formControlName="remitStatement">
</td>
<td class="tableInput" class="form-group">
<select
class="form-control"
formControlName="role"
id="{{ 'role-' +i}}">
<option *ngFor="let role of tcModifyProfileDropdowns.contactRoleList;" [value]="role">
{{role}}
</option>
</select>
</td>
<td class="tableInput" class="form-group">
<input type="text"
id="{{ 'contactName-' +i}}"
class="col-md-12"
class="form-control"
name="contactName-{{i}}"
formControlName="contactName">
</td>
<td class="tableInput" class="form-group">
<input type="email"
class="form-control"
id="{{'emailAddress-' +i}}"
class="col-md-12"
formControlName="emailAddress">
</td>
<td class="form-group">
<input appNumbersAndSpecCharOnly type="text"
id="{{ 'phoneNumber-' +i}}"
class="form-control"
formControlName="phoneNumber"
maxlength="20">
</td>
<td class="form-group">
<input type="text"
id="{{ 'Source-' +i}}"
class="form-control"
formControlName="Source">
</td>
<td>
<i class="fas fa-times iconSave text-danger" aria-hidden="true"
(click)="removeContactRow(i)"></i>
</td>
</tr>
</tbody>
</ng-container>
</table>
</div>
</form>
</div>
</ng-template>
</ngb-tab>enter image description here