angular 7 нгмодель компонента и формы связывания

Question

Я застрял в привязке формы между компонентом и шаблоном. Я хочу реализовать REST API для компонента post

. 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>

Component.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. Так что я могу получить доступ к этому на стороне сервера.

Answer 1

Используйте console.log для проверки значения формы. Похоже, что значения формы правильно связаны. Попробуйте перевести этот объект в строку http:

JSON.stringify(this.employeeDetails)

.

Answer 2

Ваш метод addEmployee не нуждается в каких-либо аргументах, потому что вы используете шаблонный подход для привязки данных формы, и в то же время вы также не передаете данные из html. измените подпись вашего метода на addEmployee() { //logic }. Как только вы нажмете кнопку, этот метод активируется и вы получите текущие значения привязки к объекту