Angular+Typescript表单提交报Cannot set properties of undefined错误

• dto未初始化：你仅声明了dto: PropiedadAplicacionDTO的类型，没有创建实例，此时dto默认值为undefined，直接访问this.dto.aplicacion就会抛出undefined错误，这就是你第56行报错的核心原因。
• estado对象未初始化：你直接对this.dto.estado.descripcion赋值，若PropiedadAplicacionDTO中的estado属性是对象类型，没有初始化的前提下也会抛出undefined错误。
• setString方法逻辑缺陷：case 4（PROD选项）没有加break，选中生产环境单选框时，代码会继续执行case 5的逻辑，强制把estado设为ALTA，覆盖你可能的选择。
• 表单控件未绑定：模板中所有hi-input都没有加formControlName属性和FormGroup中的控件对应，导致this.form.controls.xxx.value拿不到用户输入的值。
• 冗余提交事件绑定：你已经在hi-form上绑定了(submit)="onSubmit()"，提交按钮上的(ngSubmit)="onSubmit()"是无效且冗余的。

1. 初始化dto和相关属性 #

在给dto赋值前先创建实例，示例：

onSubmit() {
  if (!this.submitted && this.form.valid) { // 新增表单校验判断，避免无效提交
    this.submitted = true;
    // 新增dto初始化代码
    this.dto = new PropiedadAplicacionDTO();
    // 若estado是对象类型，同步初始化
    this.dto.estado = {} as any; // 可按DTO的实际定义调整初始化逻辑
    // 后续原有赋值逻辑保持不变
    this.dto.aplicacion = this.form.controls.aplicacion.value;
    this.dto.entorno = this.entorno.valueOf();
    this.dto.nombrePropiedad = this.form.controls.nombre.value;
    this.dto.valorPropiedad = this.form.controls.valor.value;
    this.dto.estado.descripcion = this.estado.valueOf();
    this.dto.fechaUltimaModificacion = new Date();
    // ... 剩余原有提交逻辑
  }
}

如果你的DTO是接口类型没有构造函数，可以直接赋值字面量：

this.dto = {
  aplicacion: this.form.controls.aplicacion.value,
  entorno: this.entorno,
  nombrePropiedad: this.form.controls.nombre.value,
  valorPropiedad: this.form.controls.valor.value,
  estado: {
    descripcion: this.estado
  },
  fechaUltimaModificacion: new Date()
} as PropiedadAplicacionDTO;

2. 修复setString的break问题 #

setString(entornoN: number) {
  switch (entornoN) {
    case 1:
      this.entorno = 'LOCA';
      break;
    case 2:
      this.entorno = 'DESA';
      break;
    case 3:
      this.entorno = 'TEST';
      break;
    case 4:
      this.entorno = 'PROD';
      break; // 新增缺失的break
    case 5:
      this.estado = 'ALTA';
      break;
    case 6:
      this.estado = 'BAJA';
      break;
    }
}

3. 给表单控件加formControlName绑定 #

修改模板中的hi-input，和FormGroup的控件名对应：

<hi-input required  placeholder="Nombre de la aplicacion" label="Aplicacion" type="text" id="aplicacion" name="aplicacion" formControlName="aplicacion"></hi-input>
<hi-input label="Nombre Propiedad" type="text"  name="nombre" id="nombre" formControlName="nombre"></hi-input>
<hi-input label="Valor Propiedad" type="text"  name="valor" id="valorPropiedad" formControlName="valor"></hi-input>

4. 删除按钮上冗余的ngSubmit绑定 #

<!-- 删除按钮上无效的(ngSubmit)="onSubmit()"，表单本身已经绑定了submit事件 -->
<button type="submit" class="ml-2 btn btn-primary">
  <div class="boton-icono">
    <mat-icon class="material-icons" aria-hidden="true">save</mat-icon>
    <span>&nbsp;Guardar</span>                      
  </div>  
</button>

内容的提问来源于stack exchange，提问作者Manuel Sebastian Blanco