Erros em código que não consigo identificar - resolvido

guilhermebhte · Fevereiro 7, 2020, 12:12am

Tenho este código:

export class GruposPesquisarComponent extends GHComponente implements OnInit {

  displayedColumns: string[] = ['select', 'nome', 'role', 'statusDoRegistro'];

  public grupoPesquisarFormGroup: FormGroup;

  public statusRegistros: EnumModel;

  constructor(
    private formBuilder: FormBuilder,
    protected router: Router,
    protected routaAtual: ActivatedRoute,
    protected snackBar: MatSnackBar,
    protected dialog: MatDialog,
    protected service: GruposService,
    protected alertService: AlertService,
    private enumService: EnumService,
  ) {
    super(
      new GruposPaginacaoModel(),
        'Grupos',
        'grupos',
        service,
        false,
        router,
        routaAtual,
        snackBar,
        dialog,
        alertService
    );
  }

  public ngOnInit() {
    super.ngOnInit();
    this.criarFormGroup();
    this.carregarStatusDoRegistro();
  }

  public criarFormGroup() {
    this.grupoPesquisarFormGroup = this.formBuilder.group({
      nome: new FormControl({value: ''}, Validators.required),
      role: new FormControl({value: '', disabled: true}, Validators.required),
     statusDoRegistro: new FormControl({value: '', disabled: true}, Validators.required)
    });
  }

  public limpar() {
    this.modelo = new GruposPaginacaoModel();
  }

  private carregarStatusDoRegistro() {
    this.enumService.statusRegistros().subscribe(
      (data: any) => {
        this.statusRegistros = data;
      }
    );
  }
}

Dá este erro:

ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

      Example:

      
    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });
    at Function.push../node_modules/@angular/forms/fesm5/forms.js.ReactiveErrors.controlParentException (forms.js:1437)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._checkParentType (forms.js:5877)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5881)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5803)
    at checkAndUpdateDirectiveInline (core.js:22095)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)
    at Object.eval [as updateDirectives] (GruposPesquisarComponent.html:31)
View_GruposPesquisarComponent_0 @ GruposPesquisarComponent.html:31
proxyClass @ compiler.js:18239
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24139
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15772
(anonymous) @ core.js:18126
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17258
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:18126
(anonymous) @ core.js:18010
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:17299
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:17213
next @ core.js:18010
schedulerFn @ core.js:13515
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13499
checkStable @ core.js:17268
onHasTask @ core.js:17312
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
ZoneAwarePromise.then @ zone.js:1012
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17803
./src/main.ts @ main.ts:12
__webpack_require__ @ bootstrap:78
0 @ main.ts:13
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
GruposPesquisarComponent.html:31 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 63, nodeDef: {…}, elDef: {…}, elView: {…}}

Tenho este outro código:

export class GruposAlterarComponent extends GHComponente implements OnInit {

  public grupoAlterarFormGroup: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    protected router: Router,
    protected routaAtual: ActivatedRoute,
    protected snackBar: MatSnackBar,
    protected dialog: MatDialog,
    protected service: GruposService,
    protected alertService: AlertService
  ) {
    super(
      new GruposModel(),
        'Grupos',
        'grupos',
        service,
        false,
        router,
        routaAtual,
        snackBar,
        dialog,
        alertService
    );
  }

  ngOnInit() {
    super.ngOnInit();
    this.criarFormGroup();
  }

  criarFormGroup() {
    this.grupoAlterarFormGroup = this.formBuilder.group({
      nome: new FormControl({value: ''}, Validators.required),
      role: new FormControl({value: '', disabled: true}, Validators.required)
    });
  }

  public limpar() {
    this.modelo = new GruposModel();
  }
}

O segundo não dá erro.

Não consegui identificar a diferença e o motivo.

gbuenoo · Fevereiro 7, 2020, 4:35am

Você poderia passa o código das suas view’s também? Provavelmente, o problema esteja nela.

guilhermebhte · Fevereiro 7, 2020, 8:57am

Realmente @gbuenoo, o problema era que a tag <form> e </form>, estavam sem os inputs.

Obrigado

Estava assim:

    <mat-card>
      <mat-card-content>
        <mat-card-title>Pesquisar {{label}}</mat-card-title>
      </mat-card-content>
      <mat-card-content>
        <form [formGroup]="grupoPesquisarFormGroup">
          <button mat-mini-fab type="button" matTooltip="Pesquisar {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="pesquisar(true)">
            <mat-icon>search</mat-icon>
          </button>&nbsp;
          <button mat-mini-fab type="button" matTooltip="Novo Registro de {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="novo()">
            <mat-icon>add_circle_outline</mat-icon>
          </button>&nbsp;
          <button mat-mini-fab type="button" matTooltip="Limpar {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="limpar()">
            <mat-icon>clear_all</mat-icon>
          </button>&nbsp;
          <button mat-mini-fab type="button" matTooltip="Alterar Registro de {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="alterar()">
            <mat-icon>create</mat-icon>
          </button>&nbsp;
          <button mat-mini-fab type="button" matTooltip="Excluir Registro de {{label}}" mat-fab color="warn" mat-card-icon class="shadow-none" (click)="excluir()">
            <mat-icon>delete</mat-icon>
          </button>
        </form>
      </mat-card-content>
      <mat-card-content>
        <mat-form-field class="formulario-campo-width">    
      <input matInput placeholder="Nome do grupo" id="nome" formControlName="nome" name="nome" maxlength="255" />
        </mat-form-field>
        <br>
        <mat-form-field class="formulario-campo-width">      <input matInput placeholder="Role" id="role" formControlName="role" name="role" maxlength="255" />
        </mat-form-field>
        <br>
        <mat-form-field class="formulario-campo-width">
          <mat-select placeholder="Status do registro" name="statusDoRegistro" formControlName="statusDoRegistro"  id="statusDoRegistro">
            <mat-option>Nenhum</mat-option>
            <mat-option *ngFor="let status of statusRegistros"
              [value]="status.key">{{status.texto}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </mat-card-content>
      <div [hidden]="!mostrarPesquisa">
        <mat-card>
          <mat-card-content>
            <mat-card-title>Resultado de {{label}}</mat-card-title>
          </mat-card-content>
          <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
            <ng-container matColumnDef="select">
              <th mat-header-cell *matHeaderCellDef></th>
              <td mat-cell *matCellDef="let element">
                <mat-radio-button value="element" (click)="preencherId(element.id)"></mat-radio-button>
              </td>
            </ng-container>
            <ng-container matColumnDef="nome">
              <th mat-header-cell *matHeaderCellDef> Nome do grupo </th>
              <td mat-cell *matCellDef="let element"> {{element.nome}} </td>
            </ng-container>
            <ng-container matColumnDef="role">
              <th mat-header-cell *matHeaderCellDef> Role </th>
              <td mat-cell *matCellDef="let element"> {{element.role}} </td>
            </ng-container>
            <ng-container matColumnDef="statusDoRegistro">
              <th mat-header-cell *matHeaderCellDef> Status do registro </th>
              <td mat-cell *matCellDef="let element"> {{element.statusDoRegistro}} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns" class="example-first-header-row">
            </tr>
            <tr mat-header-row class="example-second-header-row"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
        </mat-card>
      </div>
    </mat-card>

Ficando assim:

<mat-card>
  <form [formGroup]="grupoPesquisarFormGroup">
  <mat-card-content>
    <mat-card-title>Pesquisar {{label}}</mat-card-title>
  </mat-card-content>
  <mat-card-content>
      <button mat-mini-fab type="button" matTooltip="Pesquisar {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="pesquisar(true)">
        <mat-icon>search</mat-icon>
     </button>&nbsp;
      <button mat-mini-fab type="button" matTooltip="Novo Registro de {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="novo()">
        <mat-icon>add_circle_outline</mat-icon>
      </button>&nbsp;
      <button mat-mini-fab type="button" matTooltip="Limpar {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="limpar()">
        <mat-icon>clear_all</mat-icon>
      </button>&nbsp;
      <button mat-mini-fab type="button" matTooltip="Alterar Registro de {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="alterar()">
        <mat-icon>create</mat-icon>
      </button>&nbsp;
      <button mat-mini-fab type="button" matTooltip="Excluir Registro de {{label}}" mat-fab color="warn"  mat-card-icon class="shadow-none" (click)="excluir()">
        <mat-icon>delete</mat-icon>
      </button>
  </mat-card-content>
  <mat-card-content>
    <mat-form-field class="formulario-campo-width">
      <input matInput placeholder="Nome do grupo" id="nome" formControlName="nome"  name="nome" maxlength="255" />
    </mat-form-field>
    <br>
    <mat-form-field class="formulario-campo-width">
      <input matInput placeholder="Role" id="role" formControlName="role"  name="role" maxlength="255" />
    </mat-form-field>
    <br>
    <mat-form-field class="formulario-campo-width">
      <mat-select placeholder="Status do registro" name="statusDoRegistro" formControlName="statusDoRegistro" id="statusDoRegistro">
        <mat-option>Nenhum</mat-option>
        <mat-option *ngFor="let status of statusRegistros" [value]="status.key">{{status.texto}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </mat-card-content>
</form>

Erros em código que não consigo identificar - resolvido

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI