Angular表单校验报错：Property 'name' does not exist on type 'ContactComponent'

问题原因 #

错误的核心是模板引用变量#name="ngModel"定义在*ngIf="isEditing"控制的<input>元素内部，当isEditing为false时，该输入框不会被渲染，模板中也就不存在name变量。但你在外部的提示div中直接使用name.invalid，Angular的严格类型检查会判定name可能不存在，因此抛出该错误。绑定功能正常是因为只有isEditing为true时才会渲染输入框，此时name变量存在，不会触发错误。

修复方案 #

方案一：将错误提示与输入框放在同一*ngIf块内

把错误提示div和输入框包裹在同一个*ngIf="isEditing"容器中，确保只有输入框存在时，才会检查name.invalid：

<div>
  <label for="name">Name</label>
  <div *ngIf="!isEditing" class="inputColor">{{ contact.name }}</div>
  <!-- 将输入框和错误提示放在同一个*ngIf块内 -->
  <div *ngIf="isEditing">
    <input
      [ngStyle]="{ border: '1px solid #dee1e5' }"
      class="inputColor form-control"
      type="text"
      id="name"
      name="name"
      [(ngModel)]="form.name"
      required
      #name="ngModel"
    />
    <div *ngIf="name.invalid" class="p-1 bg-red-300 text-red-800 Rounded">
      Name is required
    </div>
  </div>
</div>

方案二：使用安全导航操作符?.

如果不想调整DOM结构，可在判断条件中加入安全导航操作符，避免name不存在时访问invalid属性：

<div>
  <label for="name">Name</label>
  <div *ngIf="!isEditing" class="inputColor">{{ contact.name }}</div>
  <input
    [ngStyle]="{ border: '1px solid #dee1e5' }"
    *ngIf="isEditing"
    class="inputColor form-control"
    type="text"
    id="name"
    name="name"
    [(ngModel)]="form.name"
    required
    #name="ngModel"
  />
  <!-- 加入安全导航操作符?. -->
  <div *ngIf="name?.invalid" class="p-1 bg-red-300 text-red-800 Rounded">
    Name is required
  </div>
</div>

注：建议把错误提示文本从“Address is required”改为“Name is required”，与字段对应更准确。

内容的提问来源于stack exchange，提问作者Yasser Quintana