Question

Saludos
Estoy implementando un formulario en Angular 10 que permita crear salas de chat definiendo para cada una un identificador que se registrará automáticamente y el número máximo de componentes.
Al crear el chat se accede a un observable con el contenido asociado a una respuesta que contenga el id del chat y nombre de su creador (supuestamente se tendría que registrar automáticamente teniendo en cuenta el nombre asociado al usuario que ha iniciador sesión).

El problema surge cuando pruebo el formulario. La operación que permite crear la sala de chat no se ejecuta correctamente, ya que no se guardan los valores de los atributos introducidos en el formulario (he probado a mostrar sus valores y aparece "indefinido").
No logro localizar el problema. Dejo el código a continuación:

crearchatcomponent.html

<div class="locomotion_container">
  <div class="locomotion_center_bloque font">
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div>

       <label for="nombre"> Nombre del chat</label>

        <input  id="chatname" type="text" name="nombre" /> <br /> -->

      <label for="componentes"> Número máximo de personas del chat</label>

      <input  id="chatcomponentes" type="int" name="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;
    creador: string;
}

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-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrearChatComponent } from './crearchat.component';

const routes: Routes = [{ path: '', component: CrearChatComponent}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Crearchat-RoutingModule { }

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: ['', Validators.required],

      nombre:['', Validators.required],
      id: 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 {}