嵌套表单数组错误:找不到路径为“模块-> 0->视图”的控件

时间:2019-01-24 12:21:02

标签: angular

我正在使用响应式表格Angular 7构建嵌套表格数组,错误获取:-错误错误:找不到路径为“模块-> 0->视图”的控件

已经构建了嵌套表单,但是获得了告诉我解决的方法。告诉我告诉我告诉我告诉我告诉我告诉我告诉我

  1. 提到HTML。
  2. 提及打字稿:
<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

1 个答案:

答案 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>