javascript - 错误类型错误 : Cannot read property 'value' of undefined in Angular 8

Question

我在提交表单时收到以下错误。它表示调用 onSubmit 时该值未定义。错误和代码粘贴在下面。添加完整的 HTML 文件。我正在使用 Angular 8 进行编码。

EmployeeComponent.html:14 ERROR TypeError: Cannot read property 'value' of undefined
    at EmployeeComponent.onSubmit (employee.component.ts:38)
    at Object.eval [as handleEvent] (EmployeeComponent.html:14)
    at handleEvent (core.js:43993)
    at callWithDebugContext (core.js:45632)
    at Object.debugHandleEvent [as handleEvent] (core.js:45247)
    at dispatchEvent (core.js:29804)
    at core.js:31837
    at SafeSubscriber.schedulerFn [as _next] (core.js:35379)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:185)
    at SafeSubscriber.next (Subscriber.js:124)

HTML 代码:EmployeeComponent.html - 添加完整的 HTML 代码

  <div class="row">
<div class="col s5">

  <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"> 
          <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" >
          <label>position:
              <label class="red-text">*</label>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" name="office" #_office="ngModel" [(ngModel)]="employeeService.selectedEmployee.office" >
          <label>Office:
              <label class="red-text">*</label>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" name="salary" #_salary="ngModel" [(ngModel)]="employeeService.selectedEmployee._salary" >
          <label>Salary:
              <label class="red-text">*</label>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <button class="btn btn-custom right"  type="submit">Submit</button>
          <button class="btn btn-custom right" (click)="reset(employeeForm)" type="reset" >Reset</button>
        </div>
      </div>
  </form>
</div>

employee.component.ts

onSubmit(form: NgForm){
     this.employeeService.postEmployee(form.value).subscribe((res)=>{
      this.resetForm(form);
      M.toast({html: 'Saved Successfully!',classess:'rounded'});
    });
  }
}

employee.service.ts

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  selectedEmployee: Employee;
  employees: Employee[];
  readonly baseURL='http://localhost:3000/employees';

  constructor(private http : HttpClient) { }

postEmployee(emp : Employee){
     return this.http.post(this.baseURL, emp);
}

}

Answer 1

正如评论中所讨论的，代码的问题是您需要在employeeForm 之前添加#，这是定义模板引用变量的约定。

第二个问题是ngform的拼写错误。应该是ngForm。声明应该是这样的:

<form #employeeForm="ngForm"  (ngSubmit)="onSubmit(employeeForm)">

请在下面找到工作 stackblitz 的基本代码:https://stackblitz.com/edit/angular-wmegcq