无法设置未定义的属性

Question

我在 Angular 中使用 Typescript 处理表单。我不明白为什么这个值是undefined。浏览器指示file.ts的第56行，但是（我正在学习）我没有得到问题。

这是 dto 未定义？

这里是表格

为什么表单的值没有到达 dto？

这是错误

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { OperacionABM } from '@shared/enum/operacion-abm.enum';
import { PropiedadAplicacionDTO } from 'src/app/model/propiedadAplicacion.dto';
import { InputDisabled } from 'hi-form';
import { PropiedadAplicacionService } from 'src/app/services/propiedadAplicacion.service';
import { Router, ActivatedRoute } from '@angular/router';
import { MessageService } from '@core/services/message.service';
import { ParametrosABM } from '@shared/dto/parametros-abm.dto';
import { Observable } from 'rxjs';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';



@Component({
  selector: 'app-create-propiedad',
  templateUrl: './create-propiedad.component.html',
  styleUrls: ['./create-propiedad.component.scss']
})
export class CreatePropiedadComponent implements OnInit {

  form: FormGroup;
  dto: PropiedadAplicacionDTO;
  operacion: OperacionABM;
  disabled: InputDisabled;
  private submitted: boolean;
  startPage = '/propiedad';
  entornoN: number;
  estado: string;
  entorno: string;

  constructor(private svc: PropiedadAplicacionService,
              private router: Router,
              private route: ActivatedRoute,
              private formBuilder: FormBuilder,
              private messageService: MessageService ) { }

  ngOnInit(): void {
    this.submitted = false;
    this.route.data.subscribe((parametrosABM: ParametrosABM) => {
      this.operacion = parametrosABM.operacion;
      this.disabled = parametrosABM.camposEditables ? null : InputDisabled.readonly;
    });
    this.form = this.formBuilder.group({
      aplicacion: ['', Validators.required],
      entorno: ['', Validators.required],
      nombre: ['', Validators.required],
      valor: ['', Validators.required],
      estado: ['', Validators.required]
   });
  }

  onSubmit() {
    if (!this.submitted) {
      this.submitted = true;
      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();
      console.table(this.dto);
      console.log(this.form.getRawValue());

      const respuesta: Observable<PropiedadAplicacionDTO> = this.svc.save(this.dto);

      respuesta.subscribe(
        result => {
          this.router.navigate([this.startPage]);
          this.messageService.messageOk(
            'Se cargo correctamente la informacion',
            'Propiedad creada correctamente');
          },
          error => {
            console.log(this.operacion, error);
            this.router.navigate([this.startPage]);
          },
          () => {
            this.submitted = false;
          }

      );

  }
}

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';
    case 5:
      this.estado = 'ALTA';
      break;
    case 6:
      this.estado = 'BAJA';
      break;
    }
}

}

<div class="container-fluid">
    <div class="titulo pagina">
        <h2>Crear Propiedad</h2>        
    </div>
    <div class="contenido-pagina">
        <hi-form [formGroup]="form" (submit)="onSubmit()">
            
                <div class="col-sm">
                    <hi-input required  placeholder="Nombre de la aplicacion" label="Aplicacion" type="text" id="aplicacion" name="aplicacion"></hi-input>
                    <label><strong>Entorno</strong></label>
                    <div>
                        <input type="radio" id="loca" name="entorno" value="local" (click)="setString(1)">
                        <label for="loca">Local</label>
                    </div>
                    <div>
                        <input type="radio" id="desa" name="entorno" value="desa" (click)="setString(2)">
                        <label for="desa">Desarrollo</label>
                    </div>
                    <div>
                        <input type="radio" id="test" name="entorno" value="test" (click)="setString(3)">
                        <label for="test">Test</label>
                    </div>
                    <div>
                        <input type="radio" id="prod" name="entorno" value="prod" (click)="setString(4)">
                        <label for="prod">Produccion</label>
                    </div>
                    <br>
                    
                    <hi-input label="Nombre Propiedad" type="text"  name="nombre" id="nombre"></hi-input>
                    <hi-input label="Valor Propiedad" type="text"  name="valor" id="valorPropiedad"></hi-input>
                    <label><strong>Estado</strong></label>
                    <div>
                        <input type="radio" id="alta" name="estado" value="ALTA" (click)="setString(5)">
                        <label for="alta">Alta</label>
                    </div>
                    <div>
                        <input type="radio" id="baja" name="estado" value="BAJA" (click)="setString(6)">
                        <label for="baja">Baja</label>
                    </div>
                    
                </div>         
                <div class="form-row">
                    <a class="ml-auto btn btn-secondary" [routerLink]="['/propiedad']" role="button">
                        <div class="boton-icono">
                            <mat-icon class="material-icons" aria-hidden="true">undo</mat-icon>
                                <span>&nbsp;Cancelar</span>
                        </div>
                    </a>
                    <button  (ngSubmit)="onSubmit()" 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>
                </div>  
        </hi-form>
    </div>
</div>

Answer 1

我认为代码中有错字。我看到你写了

this.dto.aplicacion = this.form.controls.apliccion.value;

但根据表单定义，它应该是"aplicacion" 而不是"apliccion"

this.form = this.formBuilder.group({
    aplicacion: ['', Validators.required],
    entorno: [null, Validators.required],
    nombre: [null, Validators.required],
    valor: [null, Validators.required],
    estado: [null, Validators.required]
});

所以正确的实现将是

this.dto.aplicacion = this.form.controls.aplicacion.value;