diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 733ee68..c132957 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core'
 import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
+import { AppService } from './services/app.service'
+import { switchMap } from 'rxjs'
 
 @Component({
   selector: 'app-root',
@@ -14,11 +16,12 @@ export class AppComponent implements OnInit {
     { value: 'es', viewValue: 'Es' },
   ]
 
-  constructor(private _formBuilder: FormBuilder) {}
+  constructor(private _formBuilder: FormBuilder, private _service: AppService) {}
 
   form = new FormGroup({})
   model: any = {}
   options: FormlyFormOptions = {}
+  roles: any;
 
   scibForm = this._formBuilder.group({
     scibGlobal: false,
@@ -32,6 +35,60 @@ export class AppComponent implements OnInit {
         {
           props: { label: 'Reporter' },
           fieldGroup: [
+            {
+              key: 'employeeNumber',
+              type: 'input',
+              props: {
+                label: 'Employee Number',
+                required: true
+              },
+              
+            },
+            {
+              key: 'roleEmployee',
+              type: 'select',
+              props: {
+                label: 'Role Employee',
+                required: true,
+                options: []
+              },
+              hooks: {
+                onInit: (field: FormlyFieldConfig) => {    
+                  this._service.getRoles().subscribe((data) => {
+                    field.props = {...field.props, options: data.map((item) => {return {label: item, value: item, id: item}})}
+                  })
+                }}
+            },
+            {
+              key: 'assignedResponsable',
+              type: 'select',
+              props: {
+                required: true,
+                label: 'Assigned responsable',
+                options: [{label:'n1111', id : '1', value : 'n1111'}, {label: 'n2222', id:'2', value: 'n2222'}]
+                
+              },
+              //resetOnHide: true
+              expressions: {
+                
+                // 'props.required': (field: FormlyFieldConfig) => {
+                //   const control = field.formControl;
+                //   if (control === 'QA'){
+
+                //   }
+              }
+            },
+            {
+              key: 'email',
+              type: 'input',
+              props: {
+                label: 'Email',
+                required: true
+              }
+
+            }
+            
+
             //Configura aqui la seccion 1
           ],
         },
@@ -66,8 +123,16 @@ export class AppComponent implements OnInit {
   ngOnInit(): void {
     this._getIsScibGlobal()
     this._printFormValues()
+    this.getRoles()
   }
 
+  private getRoles() {
+    this._service.getRoles().subscribe((data) => {
+      this.roles = data
+    })
+  }
+
+
   reset() {
     //Añade el codigo necesario para resetear el formulario
   }