我的表格“ addmedico”不起作用。如何修复按钮提交

时间:2019-05-04 19:43:01

标签: angular spring-boot crud

我正在用作春季服务器,并且在我的medico创建中,提交按钮无法正常工作。

这适用于我的项目,该项目使用Spring-boot作为服务器,使用mysql作为数据库以及在前端Angular6中使用。只是一个简单的CRUD。

这是我的medicoformcomponent.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MedicoServiceService } from '../medico-service.service';
import { Medico } from '../Medico';


@Component({
  selector: 'app-medico-form',
  templateUrl: './medico-form.component.html',
  styleUrls: ['./medico-form.component.css']
})
export class MedicoFormComponent {

  medico:Medico;

  constructor(private route:ActivatedRoute, private router:Router,
    private medicoService:MedicoServiceService) {
      this.medico = new Medico();
     }

  onSubmit() {
    this.medicoService.save(this.medico).subscribe(result => this.goToMedicoList());
  }

  goToMedicoList(){
    this.router.navigate(['/medicos']);
  }

}

这是我的HTML组件。

<div class="card my-5">
  <div class="card-body">
    <form (ngSubmit)="onSubmit()" #medicoForm="ngForm">
      <div class="form-group">
        <label for="nombre">Nombre</label>
        <input type="text" [(ngModel)]="medico.nombre" 
          class="form-control" id="nombre" name="nombre" placeholder="Ingrese nombre"
          required #nombre="ngModel">
      </div>
      <div class="form-group">
        <label for="apellido">Apellido</label>
        <input type="text" [(ngModel)]="medico.apellido" 
          class="form-control" id="apellido" name="apellido" placeholder="Ingrese apellido">
      </div>
      <div class="form-group">
        <label for="especialidad">Especialidad</label>
        <input type="text" [(ngModel)]="medico.especialidad" 
          class="form-control" id="especialidad" name="especialidad" placeholder="Ingrese especialidad">
      </div>
      <div class="form-group">
        <label for="ciudad">Ciudad</label>
        <input type="text" [(ngModel)]="medico.ciudad" 
          class="form-control" id="ciudad" name="ciudad" placeholder="Ingrese ciudad">
      </div>
      <button type="submit" class="btn btn-info">Submit</button>
    </form>
  </div>
</div>

我希望“提交”按钮将信息发送到服务器,并使用goToMedicoList()方法返回医生列表。但是什么也没发生。

0 个答案:

没有答案