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(),
});
}
}