Угловые реактивные формы с вложенными массивами форм
Я новичок в Angular 2 и решил, что лучший способ научиться - это пройти официальные руководства по Angular.
Я ознакомился с руководством по реактивным формам https://angular.io/guide/reactive-forms
демонстрационная ссылка: https://stackblitz.com/angular/jammvmbrpxle
Хотя содержание в целом было довольно хорошим, я застрял в том, как бы я реализовал более сложную форму. В данном примере каждый герой обладает потенциалом для множества адресов. Адрес сам по себе является плоским объектом.
Что делать, если адреса имели дополнительную информацию, такую как цвет и тип номеров, расположенных по адресу.
export class Address {
street = '';
city = '';
state = '';
zip = '';
rooms = Room[];
}
export class Room {
type = '';
}
чтобы модель формы выглядела так...
createForm() {
this.heroForm = this.fb.group({
name: '',
secretLairs: this.fb.array([
this.fb.group({
street: '',
city: '',
state: '',
zip: '',
rooms: this.fb.array([
this.fb.group({
type: ''
})]),
})]),
power: '',
sidekick: ''
});
}
РЕДАКТИРОВАТЬ - Завершенный код, который работает с ngOnChanges
герой-detail.component.ts
createForm() {
this.heroForm = this.fb.group({
name: '',
secretLairs: this.fb.array([
this.fb.group({
street: '',
city: '',
state: '',
zip: '',
rooms: this.fb.array([
this.fb.group({
type: ''
})
])
})
]),
power: '',
sidekick: ''
});
}
ngOnChanges() {
this.heroForm.reset({
name: this.hero.name,
});
this.setAddresses(this.hero.addresses);
}
setAddresses(addresses: Address[]) {
let control = this.fb.array([]);
addresses.forEach(x => {
control.push(this.fb.group({
street: x.street,
city: x.city,
state: x.state,
zip: x.zip,
rooms: this.setRooms(x) }))
})
this.heroForm.setControl('secretLairs', control);
}
setRooms(x) {
let arr = new FormArray([])
x.rooms.forEach(y => {
arr.push(this.fb.group({
type: y.type
}))
})
return arr;
}
hero-detail.component.html (часть вложенного массива форм)
<div formArrayName="secretLairs" class="well well-lg">
<div *ngFor="let address of heroForm.get('secretLairs').controls; let i=index" [formGroupName]="i" >
<!-- The repeated address template -->
<h4>Address #{{i + 1}}</h4>
<div style="margin-left: 1em;">
<div class="form-group">
<label class="center-block">Street:
<input class="form-control" formControlName="street">
</label>
</div>
<div class="form-group">
<label class="center-block">City:
<input class="form-control" formControlName="city">
</label>
</div>
<div class="form-group">
<label class="center-block">State:
<select class="form-control" formControlName="state">
<option *ngFor="let state of states" [value]="state">{{state}}</option>
</select>
</label>
</div>
<div class="form-group">
<label class="center-block">Zip Code:
<input class="form-control" formControlName="zip">
</label>
</div>
</div>
<br>
<!-- End of the repeated address template -->
<div formArrayName="rooms" class="well well-lg">
<div *ngFor="let room of address.get('rooms').controls; let j=index" [formGroupName]="j" >
<h4>Room #{{j + 1}}</h4>
<div class="form-group">
<label class="center-block">Type:
<input class="form-control" formControlName="type">
</label>
</div>
</div>
</div>
</div>
<button (click)="addLair()" type="button">Add a Secret Lair</button>
</div>
1 ответ
Решение
Это не сильно отличается от того, чтобы иметь вложенный formarray. По сути, вы просто дублируете код, который у вас есть... с вложенным массивом:) Итак, вот пример:
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
// you can also set initial formgroup inside if you like
companies: this.fb.array([])
})
}
addNewCompany() {
let control = <FormArray>this.myForm.controls.companies;
control.push(
this.fb.group({
company: [''],
// nested form array, you could also add a form group initially
projects: this.fb.array([])
})
)
}
deleteCompany(index) {
let control = <FormArray>this.myForm.controls.companies;
control.removeAt(index)
}
Так что это добавление и удаление для самого внешнего массива форм, поэтому добавление и удаление групп форм во вложенном массиве форм просто дублирует код. Откуда из шаблона мы передаем текущую группу форм, в какой массив вы хотите добавить (в данном случае) новый проект / удалить проект.
addNewProject(control) {
control.push(
this.fb.group({
projectName: ['']
}))
}
deleteProject(control, index) {
control.removeAt(index)
}
И таким же образом шаблон, вы перебираете свой внешний формат, а затем внутри этого перебора свой внутренний массив форм:
<form [formGroup]="myForm">
<div formArrayName="companies">
<div *ngFor="let comp of myForm.get('companies').controls; let i=index">
<h3>COMPANY {{i+1}}: </h3>
<div [formGroupName]="i">
<input formControlName="company" />
<button (click)="deleteCompany(i)">
Delete Company
</button>
<div formArrayName="projects">
<div *ngFor="let project of comp.get('projects').controls; let j=index">
<h4>PROJECT {{j+1}}</h4>
<div [formGroupName]="j">
<input formControlName="projectName" />
<button (click)="deleteProject(comp.controls.projects, j)">
Delete Project
</button>
</div>
</div>
<button (click)="addNewProject(comp.controls.projects)">
Add new Project
</button>
</div>
</div>
</div>
</div>
DEMO
РЕДАКТИРОВАТЬ:
Чтобы установить значения для вашей формы после получения данных, вы можете вызвать следующие методы, которые будут выполнять итерацию ваших данных и устанавливать значения для вашей формы. В этом случае data похоже:
data = {
companies: [
{
company: "example comany",
projects: [
{
projectName: "example project",
}
]
}
]
}
Мы называем setCompanies чтобы установить значения для нашей формы:
setCompanies() {
let control = <FormArray>this.myForm.controls.companies;
this.data.companies.forEach(x => {
control.push(this.fb.group({
company: x.company,
projects: this.setProjects(x) }))
})
}
setProjects(x) {
let arr = new FormArray([])
x.projects.forEach(y => {
arr.push(this.fb.group({
projectName: y.projectName
}))
})
return arr;
}
<tr formArrayName="entries"
*ngFor="let field of entriesGroup.get('entries').controls; let ind1 = index;">
<td [formGroupName]="ind1">
<input type="text" disabled formControlName="date1" name="date1"
class="form-control">
</td>
<td [formGroupName]="ind1" *ngIf="hideHeaders">
<div formGroupName="odometerReadingDetails">
<input type="text" formControlName="startingLocation" name="startingLocation"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="hideHeaders">
<div formGroupName="odometerReadingDetails">
<input type="text" formControlName="endingLocation" name="endingLocation"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="hideHeaders">
<div formGroupName="odometerReadingDetails">
<input type="text" formControlName="odometerReadStartingPoint"
name="odometerReadStartingPoint" class="form-control"
[ngModel]="ind1!=0?entriesGroup.get('entries').controls[ind1-1].get('odometerReadingDetails').get('odometerReadEndingPoint').value:field.get('odometerReadingDetails').get('odometerReadStartingPoint').value">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="hideHeaders">
<div formGroupName="odometerReadingDetails">
<input type="text" formControlName="odometerReadEndingPoint"
name="odometerReadEndingPoint" class="form-control"
[ngModel]="ind1<entriesGroup.get('entries').controls.length-1?entriesGroup.get('entries').controls[ind1+1].get('odometerReadingDetails').get('odometerReadStartingPoint').value:field.get('odometerReadingDetails').get('odometerReadEndingPoint').value">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="hideHeaders">
<div formGroupName="odometerReadingDetails">
<input type="text" disabled formControlName="odometerReadForOfficial"
name="odometerReadForOfficial" class="form-control"
[ngModel]="field.get('odometerReadingDetails').get('totalKilometersCovered').value-field.get('odometerReadingDetails').get('odometerReadForPersonal').value">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="hideHeaders">
<div formGroupName="odometerReadingDetails">
<input type="text" formControlName="odometerReadForPersonal"
name="odometerReadForPersonal" class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="hideHeaders">
<div formGroupName="odometerReadingDetails">
<input type="text" disabled formControlName="totalKilometersCovered"
name="totalKilometersCovered" class="form-control"
[ngModel]="field.get('odometerReadingDetails').get('odometerReadEndingPoint').value!=0?field.get('odometerReadingDetails').get('odometerReadEndingPoint').value-field.get('odometerReadingDetails').get('odometerReadStartingPoint').value:0">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="hideHeaders">
<div formGroupName="odometerReadingDetails">
<textarea rows="2" cols="20" type="text" formControlName="particularTravel"
name="particularTravel" class="form-control">
</textarea>
</div>
</td>
<td [formGroupName]="ind1" *ngIf="fuelHide">
<div formGroupName="fuelDetails">
<input type="text" formControlName="fuelFilled" name="fuelFilled"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="fuelHide">
<div formGroupName="fuelDetails">
<input type="text" formControlName="costPerLiter" name="costPerLiter"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="fuelHide">
<div formGroupName="fuelDetails">
<input type="text" disabled formControlName="costOfTheFuel" name="costOfTheFuel"
class="form-control"
[ngModel]="field.get('fuelDetails').get('costPerLiter').value * field.get('fuelDetails').get('fuelFilled').value">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="fuelHide">
<div formGroupName="fuelDetails">
<input type="text" disabled formControlName="fuelConsumption"
name="fuelConsumption" class="form-control"
[ngModel]="field.get('fuelDetails').get('costOfTheFuel').value!=0?(ind1!=0?(entriesGroup.get('entries').controls[ind1-1].get('fuelDetails').get('fuelConsumption').value + field.get('fuelDetails').get('costOfTheFuel').value):field.get('fuelDetails').get('costOfTheFuel').value):0">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="NoNeed">
<div formGroupName="fuelDetails">
<input type="text" formControlName="requestId" name="requestId"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="fuelHide">
<div formGroupName="fuelDetails">
<input type="text" formControlName="couponCode" name="couponCode"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="hideDate">
<div formGroupName="fuelDetails">
<input type="text" formControlName="couponDate" name="couponDate"
placeholder="date1,date2,..." class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="fuelHide">
<div formGroupName="fuelDetails">
<input type="text" formControlName="couponNumber" name="couponNumber"
placeholder="coupon1,coupon2,..." class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="hideDate">
<div formGroupName="fuelDetails">
<input type="text" formControlName="couponsAmount" name="couponsAmount"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="repaireHide">
<div formGroupName="vehicleRepairDetails">
<input type="text" formControlName="totalKmsCoveredBeforeRepair"
name="totalKmsCoveredBeforeRepair" class="form-control" readonly
[ngModel]="field.get('odometerReadingDetails').get('totalKilometersCovered').value">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="repaireHide">
<div formGroupName="vehicleRepairDetails">
<input type="text" formControlName="sparesCost" name="sparesCost"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="repaireHide">
<div formGroupName="vehicleRepairDetails">
<input type="text" formControlName="labourCost" name="labourCost"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="repaireHide">
<div formGroupName="vehicleRepairDetails">
<input type="text" formControlName="vehicleRepaireCost"
name="vehicleRepaireCost" class="form-control"
[ngModel]="field.get('vehicleRepairDetails').get('sparesCost').value*1 + field.get('vehicleRepairDetails').get('labourCost').value*1">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="repaireHide">
<div formGroupName="vehicleRepairDetails">
<textarea rows="2" cols="20" type="text" formControlName="particularsOfRepairs"
name="particularsOfRepairs" class="form-control">
</textarea>
</div>
</td>
<td [formGroupName]="ind1" *ngIf="workShop">
<div formGroupName="vehicleRepairDetails">
<select formControlName="workshopId" class="form-control"
(click)="workshopDetails1($event,ind1)">
<option *ngFor="let i of workshopdata"
[selected]="i.workShopId==field.get('vehicleRepairDetails').get('workshopId').value">
{{i.workShopId}}</option>
<option value="others">OTHERS</option>
</select>
</div>
</td>
<td [formGroupName]="ind1" *ngIf="workShop">
<div formGroupName="vehicleRepairDetails">
<textarea rows="2" cols="50" type="text" formControlName="workshopAddress"
name="workshopAddress" class="form-control">
</textarea>
</div>
</td>
<td [formGroupName]="ind1" *ngIf="workShop">
<div formGroupName="vehicleRepairDetails">
<input type="text" formControlName="workshopContactNumber"
name="workshopContactNumber" class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="workShop">
<div formGroupName="vehicleRepairDetails">
<textarea rows="2" cols="50" type="text"
formControlName="workshopAccountDetails" name="workshopAccountDetails"
class="form-control">
</textarea>
</div>
</td>
<td [formGroupName]="ind1" *ngIf="repaireHide">
<div formGroupName="vehicleRepairDetails">
<input type="text" formControlName="requestId" name="requestId"
class="form-control">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="driverHide">
<div formGroupName="driverChargesDetails">
<select formControlName="categoryType" class="form-control"
(click)="onCatType1($event,ind1)">
<option>Choose</option>
<option *ngFor="let i of driverChargesLimit"
[selected]="i.categoryType==field.get('driverChargesDetails').get('categoryType').value">
{{i.categoryType}}</option>
</select>
</div>
</td>
<td [formGroupName]="ind1" *ngIf="driverHide">
<div formGroupName="driverChargesDetails">
<input type="text" formControlName="amount" name="amount" class="form-control"
disabled>
</div>
</td>
<td [formGroupName]="ind1" *ngIf="driverHide">
<div formGroupName="driverChargesDetails">
<input type="time" formControlName="startingTime" name="startingTime"
class="form-control" (change)="onStartTime1($event,ind1)">
</div>
</td>
<td [formGroupName]="ind1" *ngIf="driverHide">
<div formGroupName="driverChargesDetails">
<input type="time" formControlName="endingTime"
(change)="onEndTime1($event,ind1)" name="endingTime" class="form-control">
</div>
</td>
</tr>
</tbody>
</div>
</table>
Вот что я сделал, я использовал angularflexlayout и угловой материал, вы можете использовать любую библиотеку, просто хотел показать вам функциональность
<form [formGroup]="editForm" novalidate fxLayout="column"
autocomplete="off">
<div fxLayout="row wrap" fxLayoutGap="2em">
<mat-form-field [fxFlex]="30">
<mat-label>Name</mat-label>
<input matInput formControlName="name" width="800px"/>
</mat-form-field>
</div>
<div fxLayout="column" fxLayoutGap="3em">
<div fxLayout="row wrap" fxFlex="40" fxLayoutGap="2em">
<div formArrayName="phones" fxFlex="50" fxLayoutGap="8px" *ngFor="let phone of Phones.controls;let i= index">
<mat-form-field fxFlex="100" [formGroupName]="i">
<mat-label>Phone</mat-label>
<input matInput formControlName="phone"/>
</mat-form-field>
</div>
<button type="button" mat-stroked-button color="primary" (click)="addPhone()">add</button>
</div>
<div fxLayout="row wrap" fxFlex="40" fxLayoutGap="2em">
<div formArrayName="emails" fxFlex="50" fxLayoutGap="8px" *ngFor="let email of Emails.controls;let i= index">
<mat-form-field fxFlex="100" [formGroupName]="i">
<mat-label>Email</mat-label>
<input matInput formControlName="email"/>
</mat-form-field>
</div>
<button type="button" mat-stroked-button color="primary" (click)="addEmail()">add</button>
</div>
</div>
<div class="mr-2" fxLayoutAlign="end" mat-dialog-actions>
<button type="button" (click)="cancelDialog()" mat-button
mat-dialog-close>Cancel
</button>
<button type="button" (click)="onSubmit()"
mat-raised-button
color="primary">
Submit
</button>
</div>
</form>
тогда угловой контроллер
editForm: FormGroup;
phones: FormArray;
emails: FormArray;
createForm() {
this.editForm = this.fb.group({
name: [''],
phones: this.fb.array([this.createPhone()]),
emails: this.fb.array([this.createEmail()]),
});
}
get Phones() {
return this.editForm.get('phones') as FormArray;
}
get Emails() {
return this.editForm.get('emails') as FormArray;
}
createPhone() {
return this.fb.group(({
phone: '',
}));
}
createEmail() {
return this.fb.group(({
email: ''
}));
}
addPhone(): void {
this.phones = this.editListingForm.get('phones') as FormArray;
this.phones.push(this.createPhone());
}
addEmail(): void {
this.emails = this.editListingForm.get('emails') as FormArray;
this.emails.push(this.createEmail());
}