Значение или значение form.value не определено

Question

Я пытаюсь определить неопределенные значения для угловой формы как нули, пока данные формы не введены. Я получаю ОШИБКУ TypeError: Невозможно прочитать свойство 'значение' из неопределенного. То, что я знаю, происходит из-за того, что мои значения не определены, а не нули. Я определил их в файле, но я не уверен, почему форма не выбирает ссылки на них.

Я попробовал несколько предложений от Stackoverflow, Youtube и The Angular Documents.

Associate.component.ts

constructor(private service: AssociateService) { }

  ngOnInit() { //put null check
    this.resetForm();


  }
  resetForm(form?: NgForm) {
    if(form != null)
      form.resetForm();
    this.service.formData = {
      EmployeeID: null,
      FirstName: '',
      MiddleName: '',
      LastName: '',
      EmployeeType: null,
      EmployeeStatus: null,
      EmployeeLevel: null,
      EmployeeRole: null,
      Proactive: false

    }
  }

  onSubmit(form: NgForm) {
    debugger;
    if (form.value.EmployeeID == null)
      this.insertRecord(form);
    else
      this.updateRecord(form)
  }

---

Assocaite.component.html

<form #form="ngForm" autocomplete="off">
    <div style="margin-left: 10px">
        <div class="form-group">
        <label>EMPLOYEEID</label>
        <input   name="EmployeeID" #EmployeeID=ngModel [(ngModel)]="service.formData.EmployeeID" class="form-control">
    </div>

У меня есть оставшаяся часть HTML для всех остальных данных формы. Просто хотел урезать код как можно больше.

Мне нужно form.value.EmployeeID, чтобы получить значения this.service.formData. Любая помощь или руководство будет удивительным. Я застрял на этом в течение 2 дней.

Answer 1

Другой подход может быть:

Step1 - Создать объект модели Employee.model.ts

export class employee{
 employeeID:number,
 name:string,
 lastName:string,
 ...
 ...
 ...
}

Шаг 2: инициализация в component.ts

emp:Employee | undefined;
constructor(private service: AssociateService) {
this.emp= new Employee();
}
 onSubmit() {

if (form.valid && this.emp.EmployeeID == undefined)
  this.insertRecord(this.emp);
else
  this.updateRecord(this.emp)
}

Step3 - Html-файл поиска привязки модели

<input   name="EmployeeID" #EmployeeID=ngModel 
        [(ngModel)]="emp.EmployeeID" class="form-control">