Property "#" does not exist on type "#" error

Question

I am following an online course on MEAN stack application. I am getting the following errors and I cannot figure how to fix it.

1.) Below is the code from my employee.component.ts file:

import { Component, OnInit } from '@angular/core';


import { EmployeeService } from '../shared/employee.service'

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css'],
  providers: [EmployeeService]
})
export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
  }

}

2.) Below is the code from my employee.component.html file:

<div class="row">
    <div class="col s12">
      <div class="card">
        <div class="card-content white-text">
          <div class="row">
            <div class="col sS">
              <form #employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)">
                <input type="hidden" name="_id" #_id="ngModel" [(ngModel)]="employeeService.selectedEmployee._id">
                  <div class="row">
                      <div class="input-field col s12">
                        <input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.name" placeholder="Enter full name">
                        <label>Name :
                          <label class="red-text">*</label>
                      </label>
                      </div>
                  </div>
                 <div class="row">
                      <div class="input-field col s12">
                        <input type="text" name="position" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.position" placeholder="Enter Position">
                        <label>Position :</label>
                      </div>
                  </div>
                  <div class="row">`enter code here`
                       <div class="input-field col s12">
                         <input type="text" name="office" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.office" placeholder="Enter Office">
                         <label>Position :</label>
                       </div>
                   </div>
                   <div class="row">
                        <div class="input-field col s12">
                          <input type="text" name="salary" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.salary" placeholder="Enter salary">
                          <label>Position :</label>
                        </div>
                    </div>
              </form>

            </div>
            <div class="col s7">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

I am new to this so I am having a difficult time fixing this error. I would greatly appreciate if someone can shed light on this. Thank you.

Answer 1

Try to below way:

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../shared/employee.service'

@Component({
 selector: 'app-employee',
 templateUrl: './employee.component.html',
 styleUrls: ['./employee.component.css'],
 })
 export class EmployeeComponent implements OnInit {

constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
  };
  onSubmit(employeeForm: NgForm) {
    if (employeeForm.value.$key == null) {
     this.employeeService.insertEmployee(employeeForm.value);
     this.tostr.success('registration Successfully', 'Employee Registered')
     employeeForm.reset();
    }
   } 
  }

HTML

<div class="row">
<div class="col s12">
  <div class="card">
    <div class="card-content white-text">
      <div class="row">
        <div class="col sS">
          <form #employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)">
            <input type="hidden" name="_id" #_id="ngModel" [(ngModel)]="employeeService.selectedEmployee._id">
              <div class="row">
                  <div class="input-field col s12">
                    <input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.name" placeholder="Enter full name">
                    <label>Name :
                      <label class="red-text">*</label>
                  </label>
                  </div>
              </div>
             <div class="row">
                  <div class="input-field col s12">
                    <input type="text" name="position" #position="ngModel" [(ngModel)]="employeeService.selectedEmployee.position" placeholder="Enter Position">
                    <label>Position :</label>
                  </div>
              </div>
              <div class="row">`enter code here`
                   <div class="input-field col s12">
                     <input type="text" name="office" #office="ngModel" [(ngModel)]="employeeService.selectedEmployee.office" placeholder="Enter Office">
                     <label>Position :</label>
                   </div>
               </div>
               <div class="row">
                    <div class="input-field col s12">
                      <input type="text" name="salary" #salary="ngModel" [(ngModel)]="employeeService.selectedEmployee.salary" placeholder="Enter salary">
                      <label>Position :</label>
                    </div>
                </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

All errors are legit. Let's look at your component code:

export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
  }

}

First of all, your component do not have onSubmit method that your template is trying to use (ngSubmit)="onSubmit(employeeForm)"

Furthermore, multiple place in template you are accessing employeeService vari able, make it public instead of private if you want to use if in the template as: constructor(public employeeService: EmployeeService) { }