我正在使用响应式表格Angular 7构建嵌套表格数组，错误获取：-错误错误：找不到路径为“模块-> 0->视图”的控件
已经构建了嵌套表单，但是获得了告诉我解决的方法。告诉我告诉我告诉我告诉我告诉我告诉我告诉我
<div class="main rolestyl">
<div class=" row no-gutters">
<div class="col-12 col-md-12">
<p class="hd-tilt">
Role Management
</p>
</div>
</div>
<div class="card crd-mn">
<form [formGroup]="createForm" (ngSubmit)="onSubmit(createForm)" novalidate>
<div class="card-body ">
<div class=" row no-gutters d-flex align-items-center">
<div class="col-6 ">
<p class="hd-tilt-sub">
Add Role
</p>
</div>
<div class="col-6 text-right">
<button type="submit" class="btn btn-save" [disabled]="createForm.untouched" [ladda]="isLoading" >Save</button>
<button type="button" class="btn btn-cancel" [routerLink]="['/setting/module']" >Cancel</button>
</div>
</div>
<div class=" mt-80">
<div class="card-bx">
<div class="row p-3 d-flex align-items-center">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-1"><h4>View</h4> </div>
<div class="col-1"><h4>Create</h4></div>
<div class="col-1"><h4>Edit</h4> </div>
<div class="col-1"><h4>Delete</h4></div>
<div class="col-2"><h4>Approval</h4></div>
</div>
<div class="row no-gutters d-flex align-items-center">
<div class="col-12 ml-2 mr-2 roleinput pl-3 pt-1">
<mat-form-field appearance="legacy">
<mat-label>Role</mat-label>
<input formControlName="rolename" matInput placeholder="Please enter role name">
<mat-icon matSuffix>edit</mat-icon>
</mat-form-field>
</div>
</div>
<div >
<div formArrayName="module" *ngFor="let module of createForm.get('module')['controls']; let i=index;" >
<div [formGroupName]="i">
<div formArrayName="action" *ngFor="let action of createForm.get('action')['controls']; let x=index;">
<div [formGroup]="x ">
<div>
<div class="col-md-6">
<div class="col-1"><mat-slide-toggle formControlName="view">Slide me!</mat-slide-toggle></div>
<div class="col-1"><mat-slide-toggle formControlName="create">Slid me!</mat-slide-toggle></div>
<div class="col-1"><mat-slide-toggle formControlName="edit">Slide me!</mat-slide-toggle></div>
<div class="col-1"><mat-slide-toggle formControlName="delete">Slidee me!</mat-slide-toggle></div>
<div class="col-2"><mat-slide-toggle formControlName="approval" class="ml-3">Slide me!</mat-slide-toggle></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <ul class="pl-0">
<li>
<div class="row d-flex align-items-center border sld-tgle border-left-0 border-right-0 ml-2 mr-2">
<div class="col-md-1">
<div class="adbtnbx">
<a (click)="toggle()" id="bt">
<i class="material-icons" *ngIf="show">indeterminate_check_box</i>
<i class="material-icons" *ngIf="!show">add_box </i>
</a>
<div class="col-3">
<h5>Purchase order</h5>
</div>
<div >
</div>
<div class="col-1">
<a (click)="togglecheck()" id="checkshow" class="checkshow">
<i class="material-icons font-weight-bold txtgrn" *ngIf="showcheck">check</i>
<i class="material-icons font-weight-bold" *ngIf="!showcheck">check</i>
</a>
</div>
<div formArrayName="sub_module" *ngFor="let sub_module of createForm.get('sub_module')['controls']; let ix=index;" >
<div [formGroupName]="ix">
<div *ngIf="show" class="col-md-12 animated fadeIn d-flex align-items-center border sld-tgle border-left-0 border-right-0 pt-2 pb-2 p-0">
<div class="col-1">
</div>
<div class="col-3">
<h5>Manager</h5>
</div>
<div class="col-1">
<i class="material-icons">
check
</i>
</div>
<div class="col-1"><mat-slide-toggle>Slide me!</mat-slide-toggle></div>
<div class="col-1"><mat-slide-toggle>Slide me!</mat-slide-toggle></div>
<div class="col-1"><mat-slide-toggle>Slide me!</mat-slide-toggle></div>
<div class="col-1"><mat-slide-toggle>Slide me!</mat-slide-toggle></div>
<div class="col-2"><mat-slide-toggle class="ml-3">Slide me!</mat-slide-toggle></div>
</div>
</div>
</div>
</div>
</li>
</ul> -->
</div>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
</form>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { Router } from '@angular/router';
import {ErrorStateMatcher} from '@angular/material/core';
import { RoleService } from '../../services/role.service';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
@Component({
selector: 'app-role-create',
templateUrl: './role-create.component.html',
styleUrls: ['./role-create.component.scss']
})
export class RoleCreateComponent implements OnInit {
public show = false;
public showcheck = false;
createForm: FormGroup;
submitted = false;
isLoading = false;
error: any;
success: any;
matcher = new MyErrorStateMatcher();
module: FormArray;
sub_module: FormArray;
action: FormArray;
constructor(
private fb: FormBuilder,
private toastr: ToastrService,
private router: Router,
private roleService: RoleService,
) { }
ngOnInit() {
this.createForm = this.fb.group({
rolename: '',
module: this.fb.array([ this.modulearray() ])
});
}
modulearray(): FormGroup {
return this.fb.group({
name: '',
action: this.fb.array([ this.moduleactionsarray() ]),
sub_module: this.fb.array([ this.submodulearray() ]),
});
}
moduleactionsarray(): FormGroup {
return this.fb.group({
view: '',
create: '',
edit: '',
delete: '',
approval: '',
});
}
submodulearray(): FormGroup {
return this.fb.group({
name: '',
action: this.fb.array([ this.submoduleactionsarray() ])
});
}
submoduleactionsarray(): FormGroup {
return this.fb.group({
view: '',
create: '',
edit: '',
delete: '',
approval: '',
});
}
toggle() {
this.show = !this.show;
}
togglecheck() {
this.showcheck = !this.showcheck;
}
onSubmit(createForm): void {
if (this.createForm.invalid) {
return;
}
this.isLoading = !this.isLoading;
this.roleService.addRole(this.createForm.value)
.subscribe((response) => {
this.success = response.message;
setTimeout(() => {
this.isLoading = !this.isLoading;
this.router.navigate(['/setting/module']);
}, 1000);
this.toastr.success(response.message);
},
error => {
setTimeout(() => {
this.isLoading = !this.isLoading;
this.error = error.error.message;
}, 1000);
}
);
}
}
想要解决这些错误：
ERROR Error: Cannot find control with path: 'module -> 0 -> view'
ERROR Error: Cannot find control with path: 'module -> 0 -> create'
ERROR Error: Cannot find control with path: 'module -> 0 -> edit'
ERROR Error: Cannot find control with path: 'module -> 0 -> delete'
ERROR Error: Cannot find control with path: 'module -> 0 -> apporval'
ERROR TypeError: Cannot read property 'controls' of null
答案 0 :(得分：0)
我认为是因为您像formGroupName="action"和[formGroup]="createForm"这样的失踪者。所有信息都在这里：https://angular.io/api/forms/FormGroupDirective
<div [formGroup]="createForm ">
<div formGroupName="action>
<div class="col-1"><mat-slide-toggle formControlName="view">Slide me!
</mat-slide-toggle></div>
<div class="col-1"><mat-slide-toggle formControlName="create">Slid me!
</mat-slide-toggle></div>
<div class="col-1"><mat-slide-toggle formControlName="edit">Slide me! </mat-slide-toggle></div>
<div class="col-1"><mat-slide-toggle formControlName="delete">Slidee me!</mat-slide-toggle></div>
<div class="col-2"><mat-slide-toggle formControlName="approval" class="ml-3">Slide me!</mat-slide-toggle></div>
</div>