前言:
我正经历着最艰难的时期,试图弄清楚嵌套 Angular 形式听起来像是一个简单的过程。我在这里处理一些组件,一些 formGroups
和 formArrays
是动态创建的,它让我失望。
对于大量代码转储表示歉意,但这是我能够想出的最小示例来尝试解释我的问题。
父组件非常简单,因为它只有两个 formControls
。然后我将表单传递给 tasks
组件以访问它。
父组件
this.intakeForm = this.fb.group({
requestor: ['', Validators.required],
requestJustification: ['', Validators.required]
});
HTML:
<form [formGroup]=“intakeForm”>
<app-tasks
[uiOptions]="uiOptions"
[intakeForm]="intakeForm">
</app-tasks>
</form>
任务组件
这里的一些方法将触发创建新表单组的generateTask
。
ngOnInit() {
this.intakeForm.addControl('tasks', new FormArray([]));
}
// Push a new form group to our tasks array
generateTask(user, tool) {
const control = <FormArray>this.intakeForm.controls['tasks'];
control.push(this.newTaskControl(user, tool))
}
// Return a form group
newTaskControl(user, tool) {
return this.fb.group({
User: user,
Tool: tool,
Roles: this.fb.array([])
})
}
HTML:
<table class="table table-condensed smallText" *ngIf="intakeForm.controls['tasks'].length">
<thead>
<tr>
<th>Role(s)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let t of intakeForm.get('tasks').controls let i = index; trackBy:trackByIndex" [taskTR]="t" [ui]="uiOptions" [intakeForm]="intakeForm" [taskIndex]="i">
</tr>
</tbody>
</table>
TR 组件
这里的一些方法会触发 addRole
方法来添加表单组。
@Input('taskTR') row;
@Input('ui') ui;
@Input('intakeForm') intakeForm: FormGroup;
// Add a new role
addRole($event, task) {
let t = task.get('Roles').controls as FormArray;
t.push(this.newRoleControl($event))
}
// Return a form group
newRoleControl(role) {
return this.fb.group({
Role: [role, Validators.required],
Action: [null, Validators.required]
})
}
HTML
<td class="col-md-9">
<ng-select [items]="ui.adminRoles.options"
bindLabel="RoleName"
bindValue="Role"
placeholder="Select one or more roles"
[multiple]="true"
[clearable]="false"
(add)="addRole($event, row)"
(remove)="removeRole($event, row)">
</td>
问题
我需要将 formControlName
添加到我的 TR 组件
,特别是在 ng-select
上。但是,当我尝试添加 formControlName
时,它告诉我它需要在 formGroup
中。
据我所知,formGroup
位于 tasksComponent
中,并且包裹了整个表格,因此从技术上讲它在 formGroup
中?
我的最终目标是能够将 formControlName
添加到此输入,但我很难找到到达那里的路径。
这是完整形式对象的图像。
最后展开的部分 Role
是此输入应通过 formControlName
调用的内容,以便我可以执行验证以及不在控件上的内容。
更新
编辑 1 - @Harry Ninh 的更改
任务组件 HTML
<tbody>
<tr *ngFor="let t of intakeForm.get('tasks').controls let i = index; trackBy:trackByIndex" [taskTR]="t" [ui]="uiOptions" [intakeForm]="intakeForm" [taskIndex]="i" [formGroup]="intakeForm"></tr>
</tbody>
TR 组件 HTML
<td class="col-md-9">
<ng-select [items]="ui.adminRoles.options"
bindLabel="RoleName"
bindValue="Role"
placeholder="Select one or more roles"
[multiple]="true"
[clearable]="false"
formControlName="Roles"
(add)="addRole($event, row)"
(remove)="removeRole($event, row)">
</td>
结果:错误错误:formControlName 必须与父 formGroup 指令一起使用。
最佳答案
您应该在包装所有 formControlName
、formGroupName
和formArrayName
属性。在编译代码时,Angular 不会尝试在层次结构中向上查找。
关于javascript - 无法导航 Angular 表单以访问其控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47913301/