What is the wrong while making create post operation in Angular 5

Question

I am new developper in Angular 5. I want to make insert a data my api but I am facing an error Cannot read property 'value' of undefined on my console screen. Could you help me at this issue ? I do not understand where the error is.

My example json data is here:

{
        "id": "",
        "name": "",
        "address": "",
        "contactName": "",
        "contactSurname": "",
        "contactPhone": "",
"secondContactPhone":"",
        "city": {
            "id": 1,
            "name": "asd",
            "code": 1
        },
        "town": {
            "id": 2,
            "name": "asd",
            "city": {
                "id": 1,
                "name": "asd",
                "code": 1
            }
        },

My component

import { Component, OnInit } from '@angular/core';
import { Bank } from '../models/bank';
import { City } from '../models/city';
import { BankService } from './bank.service';
import { Town } from '../models/town';

@Component({
  selector: 'app-bank',
  templateUrl: './bank.component.html',
  styleUrls: ['./bank.component.css'],
  providers:[BankService]
})
export class BankComponent implements OnInit {
  title="Bank";
  bank:Bank[];
  city:City[];
  constructor(private bankService:BankService) { }
  ngOnInit() {}

  Create(name: string,address: string,contactName: string,contactSurname:string,contactPhone: string,secondContactPhone: string, city:City,town:Town){
    const newPost : Bank= new Bank();
    newPost.name = name;
    newPost. address = address;
    newPost.contactName=contactName;
    newPost.contactSurname=contactSurname;
    newPost.contactPhone=contactPhone;
    newPost.secondContactPhone= secondContactPhone;
    newPost.city=city;
    newPost.town=town;
    this.bankService.CreateUser(newPost).subscribe((resp: Bank)=>{console.log(resp);this.bank.push(resp);
    });
  }
}

My Service

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from "@angular/common/http";
import { of } from 'rxjs/observable/of';
import { Bank } from "../models/bank";
import { Observable } from '../../node_modules/rxjs/Observable';


@Injectable()
export class BankService {

  private bankURL = 'exampleURL';
    httpOptions = {
        headers: new HttpHeaders({
          'Authorization':'bearer example token',
          'Access-Control-Allow-Origin':'*',
          'Access-Control-Allow-Methods':'*',
          'Access-Control-Allow-Headers':'*'
        }),
        withCredentials: false
      };

constructor(private http:HttpClient) { }
CreateUser(obj: Bank){return this.http.post(this.bankURL,obj,this.httpOptions);}



}

My HTML

<table style="width:500px;">
  <tr>
    <td>New name:</td>
    <td><input #name></td>
  </tr>
  <tr>
    <td>New address:</td>
    <td><input #address></td>
  </tr>
  <tr>
    <td>New contactName:</td>
    <td><input #contactName></td>
  </tr>
  <tr>
    <td>New contactSurname:</td>
    <td><input #contactSurname></td>
  </tr>
  <tr>
    <td>New contactPhone:</td>
    <td><input #contactPhone></td>
  </tr>
  <tr>
    <td>New secondContactPhone:</td>
    <td><input #secondContactPhone></td>
  </tr>
  <tr><td>New city</td>
    <td>
      <select >
        <option *ngFor="let sec of bank">{{sec?.city?.name}}</option>
      </select>
    </td>
  </tr>
  <tr><td>New city</td>
    <td>
      <select >
        <option *ngFor="let sec of bank">{{sec?.town?.name}}</option>
      </select>
    </td>
  </tr>

  <tr>
    <button (click)="Create(name.value,address.value,contactName.value,contactSurname.value,contactPhone.value,secondContactPhone.value);name.value='';">add</button>
  </tr>
</table>

Lahiru Chandima · Answer 1 · 2018-08-10T11:54:27.613

You have to bind the of your input elements to member variables of your component. Then, just call create() with no arguments on button click. create() method can access values of inputs from the variables bound to the inputs.

import { Component, OnInit } from '@angular/core';
import { Bank } from '../models/bank';
import { City } from '../models/city';
import { BankService } from './bank.service';
import { Town } from '../models/town';

@Component({
  selector: 'app-bank',
  templateUrl: './bank.component.html',
  styleUrls: ['./bank.component.css'],
  providers:[BankService]
})
export class BankComponent implements OnInit {
  public name: string;
  public address: string;
  public contactName: string;
  public contactSurname: string;
  public contactPhone: string;
  public secondContactPhone: string;

  title="Bank";
  bank:Bank[];
  city:City[];
  constructor(private bankService:BankService) { }
  ngOnInit() {}

  create(){
    const newPost : Bank= new Bank();
    newPost.name = this.name;
    newPost.address = this.address;
    newPost.contactName = this.contactName;
    newPost.contactSurname = this.contactSurname;
    newPost.contactPhone = this.contactPhone;
    newPost.secondContactPhone= this.secondContactPhone;
    this.bankService.CreateUser(newPost).subscribe((resp: Bank)=>{console.log(resp);this.bank.push(resp);
    });
  }
}



<table style="width:500px;">
  <tr>
    <td>New name:</td>
    <td><input [(ngModel)]="name"></td>
  </tr>
  <tr>
    <td>New address:</td>
    <td><input [(ngModel)]="address"></td>
  </tr>
  <tr>
    <td>New contactName:</td>
    <td><input [(ngModel)]="contactName"></td>
  </tr>
  <tr>
    <td>New contactSurname:</td>
    <td><input [(ngModel)]="contactSurname"></td>
  </tr>
  <tr>
    <td>New contactPhone:</td>
    <td><input [(ngModel)]="contactPhone"></td>
  </tr>
  <tr>
    <td>New secondContactPhone:</td>
    <td><input [(ngModel)]="secondContactPhone"></td>
  </tr>
  <tr><td>New city</td>
    <td>
      <select >
        <option *ngFor="let sec of bank">{{sec?.city?.name}}</option>
      </select>
    </td>
  </tr>
  <tr><td>New city</td>
    <td>
      <select >
        <option *ngFor="let sec of bank">{{sec?.town?.name}}</option>
      </select>
    </td>
  </tr>

  <tr>
    <button (click)="create()">add</button>
  </tr>
</table>

ı take an error on my console screen like Uncaught Error: Template parse errors — Emre Sert, Aug 10 '18 at 11:23
@EmreSert removed the identifiers in the input elements. Try now. — Lahiru Chandima, Aug 10 '18 at 11:54
`Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" New name: ][(ngModel)]="name"> "): ng:///AppModule/BankComponent.html@3:15 ` Error is this. Altought removed it , i have an error again on my console screen. — Emre Sert, Aug 11 '18 at 12:07
@EmreSert you have to import `FormsModule` to your app module. Check this: https://stackoverflow.com/a/38896469/1015678 — Lahiru Chandima, Aug 11 '18 at 12:13
You solved my problem. Thank you a lot. Now , i do not take a mistake on my console screen. — Emre Sert, Aug 11 '18 at 12:25

What is the wrong while making create post operation in Angular 5

1 Answers1