0
私は、ユーザーが一度に招待するフォームに任意の数の「メンバー」を追加できる「メンバーの招待」フォームを作成しています。私はこの作品を理解して作業しています。Angular 2フォームビルダ - ネスト要素2レベル深度エラー：パスでコントロールを見つけることができない
また、ユーザーが関連付けることができるチームに対応する動的に作成されたチェックボックスのリストがあります。そのため、ダイナミックリストに基づいてそれらのコントロールをオンザフライで作成する必要があります。
私の問題は、フォームがすべてのネストから少し複雑になっているように見えることです。これらのチームの動的な性質のため、いくつかの問題に取り掛かります。
HTML：：
<form [formGroup]="inviteMembersForm" novalidate (ngSubmit)="onInviteMembers(inviteMembersForm.value, inviteMembersForm.valid)" class="ui form">
<ul>
<li formArrayName="members">
<div *ngFor="let member of inviteMembersForm.controls.members.controls; let i=index">
<ul class="members-info"
[formGroupName]="i">
<li class="email">
<h4>Email Address</h4>
<sm-input [control]="inviteMembersForm.controls.members.controls[i].controls.email" class="left fluid" placeholder="[email protected]"></sm-input>
<small [hidden]="inviteMembersForm.controls.members.controls[i].controls.email.valid || (inviteMembersForm.controls.members.controls[i].controls.email.pristine && !submitted)">
A valid email is required
</small>
</li>
<li class="first-name">
<h4>First Name</h4>
<sm-input
[control]="inviteMembersForm.controls.members.controls[i].controls.firstName"
class="left fluid"
placeholder="Optional">
</sm-input>
</li>
<li class="last-name">
<h4>Last Name</h4>
<sm-input
[control]="inviteMembersForm.controls.members.controls[i].controls.lastName"
class="left fluid"
placeholder="Optional">
</sm-input>
</li>
<li class="teams-button">
<button (click)="togglePeopleTeamsVisible(i)">
<span>Teams</span>
<i class="fa fa-chevron-down" *ngIf="!memberTeamsVisibility[i].isVisible"></i>
<i class="fa fa-chevron-up" *ngIf="memberTeamsVisibility[i].isVisible"></i>
</button>
</li>
<li class="remove-button" *ngIf="(i + 1) > 1">
<button (click)="removeMember(i)"><img src="/assets/images/icons/close.svg" width="20" /></button>
</li>
</ul>
<div class="teams-block"
*ngIf="memberTeamsVisibility[i].isVisible"
formArrayName="teams">
<ul class="team-list"
*ngFor="let team of inviteMembersForm.controls.members.controls.teams.controls; let j=index">
<li [formGroupName]="j">
</li>
</ul>
</div>
</div>
</li>
<li>
<button class="add-invite" (click)="addMember()">
<img src="/assets/images/icons/invite-add-blue.svg" width="16" />
<span>Add another invitation</span>
</button>
</li>
<li><input type="submit" [disabled]="!inviteMembersForm.valid" class="btn" value="Invite {{inviteMembersForm.controls.members.controls.length}} Person" /></li>
</ul>
</form>
活字体：
簡潔にするためにerror_handler.js:45 EXCEPTION: Error in ./InviteMembersComponent class InviteMembersComponent - inline template:60:12 caused by: Cannot find control with path: 'members -> teams'
、ここでは機能のほんの関連部分のコードは次のとおりです。私は取得しています主な問題は、エラーになります
public inviteMembersForm: FormGroup;
public memberTeamsVisibility: any = [];
public teams: any = [
{
id: 1,
title: "Engineering",
count: 3,
},
{
id:2,
title: "Sales",
count: 1
},
{
id:3,
title: "Marketing",
count: 2
}
];
constructor(
private _fb: FormBuilder,
private _validators: ValidatorsService
) {
this.createInviteMembersForm();
}
ngOnInit() {
}
/**
* Creation of form for "Invite member"
*/
createInviteMembersForm() {
this.inviteMembersForm = this._fb.group({
members: this._fb.array([this.initMember()])
});
// Add a team visibility toggle for the newly added member
this.addMemberTeamVisibilityToggle();
// Add the teams
this.addTeams();
console.log(this.inviteMembersForm.controls['members']['controls'][0]['controls']['teams']);
}
/**
* Create a form group for adding an "invite member" form
*/
initMember() {
return this._fb.group({
email: ['', [<any>Validators.required, this._validators.isValidEmail]],
firstName: ['', []],
lastName: ['', []],
teams: this._fb.array([])
});
}
// Add teams to the form
addTeams() {
const teamsControl = <FormArray>this.inviteMembersForm.controls['members']['controls'][0]['controls']['teams'];
this.teams.forEach(team => {
teamsControl.push(this.addTeam(team.title));
})
}
/**
* Adds a team form group to the user
*/
addTeam(title) {
return this._fb.group({
team: [title, []]
});
}
/**
* Add an entry for teams visibility anytime a new member is added
*/
addMemberTeamVisibilityToggle() {
let membersLength = this.inviteMembersForm.controls['members']['_value'].length;
for(let i = 0; i < membersLength; i++) {
this.memberTeamsVisibility.push({ isVisible: false});
}
}
/**
* Add a member to the form
*/
addMember() {
// add address to the list
const control = <FormArray>this.inviteMembersForm.controls['members'];
control.push(this.initMember());
this.addMemberTeamVisibilityToggle();
}
removeMember(i: number) {
const control = <FormArray>this.inviteMembersForm.controls['members'];
control.removeAt(i);
this.memberTeamsVisibility.removeAt(i);
}
誰かが私が逃しているものに光を当てることができますか？私はほとんどそれを得たように感じる。