0

Estoy tratando de hacer un render condicional con un ngSwitchCase pero no logro que la variable tome el valor correspondiente. la variable selectedService deberia recibir los valores del menu desplegabley en base a eso renderizar lo que corresponda en el ngSwitchCase de mas abajo, por defecto recibe 'consultorio' pero no logro que raciba el valor correcto cambio en el menu.

el HTML es el siguiente:

<div class="col-8">
    <form class="col-8 offset-1">
      <div class="form-group">
        <label for="serviceType">Tipo de Servicio</label>
        <select [(ngModel)]="selectedService" class="form-control">
          <option value="consultorio">Consultorio</option>
          <option value="paseSala">Pase de Sala</option>
          <option value="guardia">Guardia</option>
        </select>
        <p>valor seleccionado: {{selectedService}}</p>
        <div [ngSwitch]="selectedService">
          <div *ngSwitchCase="'consultorio'">
            <h1>consultorio</h1>
          </div>
          <div *ngSwitchCase="'paseSala'">
            <h1>pase de sala</h1>
          </div>
          <div *ngSwitchCase="'guardia'">
            <h1>guardia</h1>
          </div>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Guardar</button>
    </form>
  </div>

el archivo TS es el siguiente:

import { Component } from '@angular/core';
@Component({
  selector: 'app-profsessional-form',
  templateUrl: './profsessional-form.component.html',
  styleUrls: ['./profsessional-form.component.css']
})
export class ProfsessionalFormComponent {
  selectedService: string = 'consultorio';

}

y el app.module.ts es el siguiente:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProfsessionalFormComponent } from './profsessional-form/profsessional-form.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    ProfsessionalFormComponent
  ],
  imports: [
    BrowserModule,
  FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

1 respuesta 1

1

Al usar ngModel dentro un form se le debe dar un nombre al control.

<select name="service" [(ngModel)]="selectedService" class="form-control">

Si revisas la consola del navegador debería estar apareciendo el siguiente error:

Error: NG01352: If ngModel is used within a form tag, either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.

Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.