angular 7 ngmodel 组件和表单绑定答案

【问题标题】：angular 7 ngmodel component and form bindingangular 7 ngmodel 组件和表单绑定
【发布时间】：2020-05-01 18:13:06
【问题描述】：

我卡在组件和模板之间的表单绑定中。我想为 post 方法实现 REST API

component.html

  <div class="container custom-container">
    <div class="col-md-12">
      <h3 class="mb-3 text-center">Create Employee</h3>

<div class="form-group">
  <input type="text" [(ngModel)]="employeeDetails.name" class="form-control" placeholder="Name">
</div>

<div class="form-group">
  <input type="text" [(ngModel)]="employeeDetails.email" class="form-control" placeholder="Email">
</div>


<div class="form-group">
  <input type="text" [(ngModel)]="employeeDetails.phone" class="form-control" placeholder="Phone">
</div>

<div class="form-group">
  <button class="btn btn-success btn-lg btn-block" (click)="addEmployee()">Create Employee</button>
</div>

组件.ts

   import { Component, OnInit, Input } from '@angular/core';
   import { Router } from '@angular/router';
   import { RestApiService } from "../shared/rest-api.service";
   @Component({
      selector: 'app-employee-create',
      templateUrl: './employee-create.component.html',
      styleUrls: ['./employee-create.component.css']
   })
  export class EmployeeCreateComponent implements OnInit {

  @Input() employeeDetails = { name: '', email: '', phone: 0 }

  constructor(
     public restApi: RestApiService, 
     public router: Router
  ) { }

  ngOnInit() { }

  addEmployee(dataEmployee) {
      this.restApi.createEmployee(this.employeeDetails).subscribe((data: {}) => {
      this.router.navigate(['/employees-list'])
     })
    }
  }

我想在 createEmployee 函数中传递表单值。这样我就可以在服务器端访问它。

【问题讨论】：

您是说 this.employeeDetails 值没有绑定到表单值吗？如果是这样，您是否尝试检查 this.employeeDetails 中的值？也许做一个 console.log(this.employeeDetails) 并检查你的控制台的值
@PreethiRajaraman 我有评论服务 api 和 console.log(this.employeeDetails) 我收到 {"name":"","email":"","phone":0}跨度>

标签： angular angular7 angular-ngmodel

【解决方案1】：

您的方法addEmployee 不需要任何参数，因为您使用模板驱动的方法来绑定表单数据，同时您也没有从 html 传递任何数据。将您的方法签名更改为addEmployee() { //logic }。单击按钮后，它将触发此方法并获取绑定到对象的当前值

【讨论】：

我也用过不带参数的
这些输入是否在
标签内？

【解决方案2】：

使用 console.log 检查表单值，似乎表单值已正确绑定。在传递给 http post 之前尝试对对象进行字符串化

JSON.stringify(this.employeeDetails)

【讨论】：

我已经使用了这个包含空白的名称
表单值在对象employeeDetails中正确绑定。我认为您的服务可能有问题。
我有评论服务代码和console.log使用的响应是{"name":"","email":"","phone":0}
您必须在表单字段中输入姓名、电子邮件和电话，然后单击创建员工按钮。见 - {姓名：“dasf”，电子邮件：“fasd”，电话：“123”}
让我们continue this discussion in chat。