Html 错误：未捕获（承诺中）：错误：无法分配给引用或变量

我理解这可能是一个重复的问题，但通过阅读其他解决方案，我无法解决我的问题。因此，如果有人能指出我的错误，我将不胜感激。 HTML代码：

<div class="jumbotron">
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <form [formGroup]="contactForm" >
        <div class="form-group">
          <label>Contact Id</label>
          <input type="text"
           formControlName="contactId"
           [(ngModel)]="contactId"
           class="form-control" />
          <!-- <div *ngIf="submitted && contactFormf.contactId.errors" class="invalid-feedback">
                <div *ngIf="contactFormf.contactId.errors.required">Contact Id is required</div>
              </div> -->
        </div>
        <div class="form-group">
          <label>Agreement Id</label>
          <input
            type="text"
            formControlName="agreementId"
            [(ngModel)]="agreementId"
            class="form-control"
            [ngClass]="{ 'is-invalid': submitted && contactFormf.agreementId.errors }"
          />
          <div *ngIf="submitted && contactFormf.agreementId.errors" class="invalid-feedback">
            <div *ngIf="contactFormf.agreementId.errors.required">Agreement Id is required</div>
          </div>
        </div>
        <div class="form-group">
          <label>Contact Type</label>
          <mat-select
          formControlName="contactType"
          [(ngModel)]="contactType"
          class="form-control">
          <mat-option *ngFor="let obj of contactTypes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
          </mat-select>
        </div>
        <div class="form-group">
          <label>Contact Type Description</label>
          <input type="text"
          formControlName="contactTypeDescription"
          [(ngModel)]="contactTypeDescription"
          class="form-control" />
        </div>
        <div class="form-group">
          <label>Contact Sub Type</label>
          <mat-select
          formControlName="contactSubType"
          [(ngModel)]="contactSubType"
          class="form-control">
          <mat-option *ngFor="let obj of contactTypes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
          </mat-select>
        </div>
        <div class="form-group">
          <label>Contact Sub Type Description</label>
          <input type="text"
          formControlName="contactSubTypeDescription"
          [(ngModel)]="contactSubTypeDescription"
          class="form-control" />
        </div>
        <div class="form-group">
          <label>Reference Number</label>
          <input type="text"
          formControlName="referenceNumber"
          [(ngModel)]="referenceNumber"
          class="form-control" />
        </div>
        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactLastVerifiedDatepicker"
            formControlName="contactlastVerifiedDate"
            [(ngModel)]="contactlastVerifiedDate"
            placeholder="Choose Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactLastVerifiedDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #complaintStartDatepicker></mat-datepicker>
        </div>

        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactStartDatepicker"
            formControlName="contactStartDate"
            [(ngModel)]="contactStartDate"
            placeholder="Choose Contact Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactStartDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactStartDate></mat-datepicker>
        </div>
        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactEndDatepicker"
            formControlName="contactEndDate"
            [(ngModel)]="contactEndDate"
            placeholder="Choose Contact Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactEndDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactStartDate></mat-datepicker>
        </div>
      </form>
    </div>
  </div>
</div>

联系人Id
协议Id
协议Id是必需的
接触式
{{obj.viewValue}}
接触类型说明
接触子类型
{{obj.viewValue}}
联系人子类型描述
参考号

打字脚本代码：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-contactform',
templateUrl: './contactform.component.html',
styleUrls: ['./contactform.component.scss']
})
export class ContactformComponent implements OnInit {
contactForm: FormGroup;
contactId = '';
agreementId = '';
contactType = '';
contactTypeDescription = '';
contactSubType = '';
contactSubTypeDescription = '';
referenceNumber = '';
contactlastVerifiedDate = '';
contactStartDate = '';
contactEndDate = '';
contactTypes: any[] = [{ value: '', viewValue: '' }, { value: '', 
viewValue: '' }, { value: '', viewValue: '' }];
contactSubTypes: any[] = [{ value: '', viewValue: '' }, { value: '', 
viewValue: '' }, { value: '', viewValue: '' }];
constructor(private formBuilder: FormBuilder) {}
@Output()
savedContact: EventEmitter<any> = new EventEmitter<any>();
ngOnInit() {
this.contactForm = this.formBuilder.group({
  contactId: ['', Validators.required],
  agreementId: ['', Validators.required],
  contactType: ['', Validators.required],
  contactTypeDescription: [''],
  contactSubType: ['', Validators.required],
  contactSubTypeDescription: [''],
  referenceNumber: [''],
  contactlastVerifiedDate: ['', Validators.required],
  contactStartDate: ['', Validators.required],
  contactEndDate: ['']
 });
 }
 get contactFormf() {
 return this.contactForm.controls;
 }

 onSubmitcontactForm() {
// Stop here if Agent Relationship Form is invalid
if (this.contactForm.invalid) {
  return;
}
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.contactForm.value));
}
saveContact() {
var savedContact = {
  contactId: this.contactId,
  agreementId: this.agreementId,
  contactType: this.contactType,
  contactDescription: this.contactTypeDescription,
  contactSubType: this.contactSubType,
  contactSubTypeDescription: this.contactSubTypeDescription,
  referenceNumber: this.referenceNumber,
  lastVerifiedDate: this.contactlastVerifiedDate,
  startDate: this.contactStartDate,
  endDate: this.contactEndDate
  };
  this.savedContact.emit(savedContact);
  }
  }
  class Contact {
  contactId?: number;
  agreementId?: string[];
  contactType?: string;
  contactDescription?: string;
  endDate?: string;
  lastVerifiedDate?: string;
  referenceNumber?: string;
  startDate?: string;
  contactSubType?: string;
  contactSubTypeDescription?: string;
  }

从'@angular/core'导入{Component，OnInit，Output，EventEmitter}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
@组成部分({
选择器：“应用程序联系人表单”，
templateUrl:'./contactform.component.html'，
样式URL:['./contactform.component.scss']
})
导出类ContactformComponent实现OnInit{
联系方式：FormGroup；
contactId=“”；
agreementId=''；
contactType=''；
contactTypeDescription=''；
contactSubType=''；
ContactSubscription=''；
参考编号=“”；
contactlastVerifiedDate=''；
contactStartDate=''；
contactEndDate=''；
contactTypes:any[]=[{value:''，viewValue:''}，{value:''，
视图值：''}，{value:''，视图值：'}]；
contactSubTypes:any[]=[{value:''，viewValue:''}，{value:''，
视图值：''}，{value:''，视图值：'}]；
构造函数（私有formBuilder:formBuilder）{}
@输出（）
savedContact:EventEmitter=新的EventEmitter（）；
恩戈尼尼特（）{
this.contactForm=this.formBuilder.group({
联系人ID:[''，验证程序。必需]，
协议ID:[''，验证人。必填]，
联系人类型：[''，验证器。必需]，
联系人类型描述：['']，
contactSubType:[''，验证程序。必需]，
联系人描述：['']，
参考编号：['']，
contactlastVerifiedDate:[''，验证器。必需]，
contactStartDate:[''，需要验证程序]，
contactEndDate:['']
});
}
获取contactFormf（）{
返回此.contactForm.controls；
}
onSubmitcontactForm（）{
//如果代理关系表单无效，请停止此处
如果（此.contactForm.invalid）{
返回；
}
警报（'SUCCESS！！：-）\n\n'+JSON.stringify（this.contactForm.value））；
}
saveContact（）{
var savedContact={
contactId:this.contactId，
agreementId:this.agreementId，
contactType:this.contactType，
contactDescription:this.contactTypeDescription，
contactSubType:this.contactSubType，
ContactSubmitDescription:this.ContactSubmitDescription，
referenceNumber:this.referenceNumber，
lastVerifiedDate:this.contactlastVerifiedDate，
startDate:this.contactStartDate，
endDate:此为。contactEndDate
};
this.savedContact.emit（savedContact）；
}
}
班级联系{
contactId？：号码；
agreementId？：字符串[]；
contactType？：字符串；
contactDescription？：字符串；
endDate？：字符串；
lastVerifiedDate？：字符串；
referenceNumber？：字符串；
起始日期？：字符串；
contactSubType？：字符串；
ContactSubscription？：字符串；
}

---

通过阅读其他答案，我了解到我的ngModel声明和typescript中的变量不匹配或类似的情况。但我不完全确定我的错误在哪里。我已经为我的其他组件做了类似的事情，它们似乎工作得很好。

这里是stackblitz

---

您的contactStartDatepicker和contactEndDatepicker定义错误，我编辑如下

<mat-form-field>
  <input matInput [matDatepicker]="startDate" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
  <mat-datepicker #startDate></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="endDate" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
  <mat-datepicker #endDate></mat-datepicker>
</mat-form-field>

---

这是stackblitz的作品

---

您的contactStartDatepicker和contactEndDatepicker定义错误，我编辑如下

<mat-form-field>
  <input matInput [matDatepicker]="startDate" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
  <mat-datepicker #startDate></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="endDate" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
  <mat-datepicker #endDate></mat-datepicker>
</mat-form-field>

---

您的

mat-datepicker

引用变量

mat-datepicker-toggle[for]

属性和

[matDatepicker]

属性不匹配

改变一下，如下所示

        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactLastVerifiedDatepicker"
            formControlName="contactlastVerifiedDate"
            [(ngModel)]="contactlastVerifiedDate"
            placeholder="Choose Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactLastVerifiedDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactLastVerifiedDatepicker></mat-datepicker>
        </div>

        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactStartDatepicker"
            formControlName="contactStartDate"
            [(ngModel)]="contactStartDate"
            placeholder="Choose Contact Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactStartDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactStartDatepicker></mat-datepicker>
        </div>
        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactEndDatepicker"
            formControlName="contactEndDate"
            [(ngModel)]="contactEndDate"
            placeholder="Choose Contact Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactEndDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactEndDatepicker></mat-datepicker>
        </div>

---

您的

mat-datepicker

引用变量

mat-datepicker-toggle[for]

属性和

[matDatepicker]

属性不匹配

改变一下，如下所示

        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactLastVerifiedDatepicker"
            formControlName="contactlastVerifiedDate"
            [(ngModel)]="contactlastVerifiedDate"
            placeholder="Choose Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactLastVerifiedDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactLastVerifiedDatepicker></mat-datepicker>
        </div>

        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactStartDatepicker"
            formControlName="contactStartDate"
            [(ngModel)]="contactStartDate"
            placeholder="Choose Contact Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactStartDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactStartDatepicker></mat-datepicker>
        </div>
        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactEndDatepicker"
            formControlName="contactEndDate"
            [(ngModel)]="contactEndDate"
            placeholder="Choose Contact Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactEndDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactEndDatepicker></mat-datepicker>
        </div>

您的contactStartDatepicker和contactEndDatepicker定义错误。您的contactStartDatepicker和contactEndDatepicker定义错误。