0

Estoy implementando un formulario en Angular 10 para crear salas de chat y tengo un problema derivado de subscribe. En un principio creí que el método finalize no llegaba a llamarse, pero, tras hacer pruebas vi que el problema era de subscribe, concretamente del siguiente código:

if (this.form.valid) {
      const formValue = { ...this.form.value };
      const body: chat = formValue as chat;
      this.loading = true;
      this.ChatService.crearchat(body)
      .pipe(
        finalize(() => {
          this.loading = false;
        })
      )
      .subscribe((x) => {
        this.messageService.add({
          severity: 'info',
          life: environment.modalTime,
          summary: 'Chat creado con éxito',
          detail: '' + x,
        });
        this.router.navigate(['/chat/home']);
      });
    } else {
     this.messageService.add({
        severity: 'error',
       life: environment.modalTime,
      summary: 'Formulario incorrecto',
      detail:
         'Asegúrese de rellenar todos los campos respetando el formato.',
      });
    }

Adjunto también el resto de código que he utilizado para implementar el formulario.

crearchatcomponent.html

<div class="locomotion_container">
  <div class="locomotion_center_bloque font">
    <form [formGroup]="form" (ngSubmit)="onSubmit()" method="post">
      <div>
       <label for="nombre"> Nombre del chat</label>
        <input  id="chatname" type="text" name="nombre"  formControlName="nombre" /> <br /> -->
      <label for="componentes"> Número máximo de personas del chat</label>
      <input  id="chatcomponentes" type="int" name="componentes" formControlName="componentes"  /> <br />
      <br />
</div>
      <button id="botonCrear" class="button" type="submit">Crear chat</button>
    </form>
  </div>
</div>

Models

chat.ts

export interface chat{
    id: number;
    nombre: string;
    componentes: number;
}

chatestado.ts

export interface chatestado{
    chatActivo: boolean;
} 

chatrespuesta.ts

export interface chatResponse{
    id: number;
}

chat.service.ts

import { ChatEstado } from './../models/chat/chatestado';
import { HttpClient, HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { environment } from 'src/environments/environment';
import { chat } from '../models/chat/chat';
import { ChatRespuesta } from '../models/chat/chatrespuesta';
import { catchError } from 'rxjs/operators';
 
@Injectable({
  providedIn: 'root',
})

export class ChatService {
  constructor(private httpClient: HttpClient) {}
  private static readonly ENDPOINT: string = 'chat';
  id = '';
  crerchat(body: chat): Observable<Chatrespuesta> {
    return this.httpClient.post<ChatRespuesta>(
      `${environment.url}${ChatService.ENDPOINT}`,
      body
    );
  }

  getChatEstado(id: number): Observable<ChatEstado> {
  return this.httpClient.get<ChatEstado>(
      `${environment.url}${ChatService.ENDPOINT}/get-status/${chatCode}`
    );
  }
}

crearchat.component.ts

import { Component, OnInit } from '@angular/core';
import { ChatService } from 'src/app/services/chat.service';
import { chatRespuesta } from 'src/app/models/chat/chatrespuesta';
import {
  FormBuilder,
  FormGroup,
  Validators,
} from '@angular/forms';
import { Router } from '@angular/router';
import { MessageService } from 'primeng/api';
import { DataService } from 'src/app/services/data.service';
import { environment } from 'src/environments/environment';
import { delay, finalize } from 'rxjs/operators';
import {chat} from 'src/app/models/chat/chat';
@Component({
  selector: 'app-crearchat',
  templateUrl: './crearchat.component.html',
  styleUrls: ['./crearchat.component.scss'],
})

export class CreatechatComponent implements OnInit {
  form: FormGroup;
  loading: boolean;
  constructor(
    private formBuilder: FormBuilder,
    private ChatService: ChatService,
    private router: Router,
    private messageService: MessageService,
    public dataService: DataService

  ) {

    this.loading = false;

    this.form = this.formBuilder.group({

 

     componentes:new FormControl(''),

 

      nombre:new FormControl(''),

      id: new FormControl(1),//El id tiene que generarse automáticamente,

      //pero en principio pongo uno de prueba

 

    });

 

}

 

ngOnInit(): void {}

  onSubmit(): void {

 

    if (this.form.valid) {

 

      const formValue = { ...this.form.value };

 

      const body: chat = formValue as chat;

 

      this.loading = true;

 

      this.ChatService.crearchat(body)

      .pipe(

 

        finalize(() => {

          this.loading = false;

        })

      )

      .subscribe((x) => {

 

        this.messageService.add({

          severity: 'info',

          life: environment.modalTime,

          summary: 'Chat creado con éxito',

          detail: '' + x,

        });

        this.router.navigate(['/chat/home']);

      });

    } else {

     this.messageService.add({

        severity: 'error',

       life: environment.modalTime,

      summary: 'Formulario incorrecto',

      detail:

         'Asegúrese de rellenar todos los campos respetando el formato.',

      });

    }

  }} 

crearchat.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

 

import { CrearChatComponent } from './crearchat.component';

 

describe('CrearChatComponent', () => {

  let component: CrearChatComponent;

  let fixture: ComponentFixture<CrearChatComponent>;

 

  beforeEach(async () => {

    await TestBed.configureTestingModule({

      declarations: [ CrearChatComponent ]

    })

    .compileComponents();

  });

 

  beforeEach(() => {

    fixture = TestBed.createComponent(CrearChatComponent);

    component = fixture.componentInstance;

    fixture.detectChanges();

  });

 

  it('should create', () => {

    expect(component).toBeTruthy();

  });

});

crearchat.module.ts

import { CrearChatComponent } from './crearchat.component';

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { ReactiveFormsModule } from '@angular/forms';

import { CrearChatRoutingModule } from './crearchat-routing.module';

 

@NgModule({

  declarations: [CrearChatComponent],

  imports: [CommonModule, CrearChatRoutingModule,ReactiveFormsModule],

})

export class CrearChatModule {}

Gracias de antemano por las respuestas

2
  • solo pones el código y medio explicas como si supieras lo que quieres hacer y el error que tienes mmmmm el 30 ene. 2021 a las 3:25
  • Hola, primero que nada no entiendo por que agregaste varios saltos de línea en tu código, es realmente molesto de leer, y te recomendaría que no lo hagas. Segundo, no queda claro cuál es tu problema en específico. Podrías agregar el error que obtienes o que esperas obtener vs lo que estas obteniendo? el 17 feb. 2021 a las 1:53

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.