angular (2021) formGroup expects a FormGroup instance. Please pass one in

Viewed 37

i have problem with the formGroup in html

i just want to set the select with the service

here´s the html

<form [formGroup]="formGroup">
    <div class="formInfo">
        <mat-dialog-content>
            <mat-form-field>
                <mat-label>Titulo</mat-label>
                <input matInput formControlName="tittle">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Modulo</mat-label>
                <mat-select formControlName="idModule">
                    <mat-option *ngFor="let module of modules" value="{{module.idModule}}">{{module.name}}</mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Opcion</mat-label>
                <mat-select>
                    <mat-option value="one">First option</mat-option>
                    <mat-option value="two">Second option</mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Tipo de Incidencia</mat-label>
                <mat-select>
                    <mat-option value="one">First option</mat-option>
                    <mat-option value="two">Second option</mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Fecha de Cierre</mat-label>
                <input matInput [matDatepicker]="picker">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Detalle Incidencia</mat-label>
                <textarea matInput formControlName="incidentDetail"></textarea>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Comentario Cierre</mat-label>
                <textarea matInput formControlName="closeComentary"></textarea>
            </mat-form-field>
        </mat-dialog-content>
    </div>
</form>

.ts

import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { fadeInFadeOut } from '@app/share/animations/fadeInFadeOut';
import { GetModulesModel } from '../models/ticket.model';
import { TicketFormConstant } from '../models/ticket-form-constant';


@Component({
  selector: 'app-incident-registration-form-dialog',
  templateUrl: './incident-registration-form-dialog.component.html',
  styleUrls: ['./incident-registration-form-dialog.component.sass'],
  animations: [fadeInFadeOut]
})
export class IncidentRegistrationFormDialogComponent implements OnInit {

  formGroup: FormGroup;
  element:  any;
  isDisabled: boolean;

  constructor(private fb: FormBuilder,
              public dialogRef: MatDialogRef<IncidentRegistrationFormDialogComponent>,  @Inject(MAT_DIALOG_DATA) private data) {
   }
   modulesOptions = TicketFormConstant.URL_PATH_TICKET_MODULE;
   selectModule: GetModulesModel[] = JSON.parse(localStorage.getItem('modules'));

   ngOnInit(): void {
    this.element = this.data.element;
    this.isDisabled = this.data.isDisabled;

    this.formGroup = this.fb.group({
          tittle : new FormControl(),
          idModule : new FormControl({ value: this.data.element.idModule ?  this.data.element.idModule.toString() : '', disabled: this.isDisabled}, [Validators.required]),
          options : new FormControl(),
          incidentType: new FormControl(),
          closeDate : new FormControl(),
          incidentDetail: new FormControl(),
          closeComentary: new FormControl(),
      });
    }

}
0 Answers
Related