typescript 调整Angular 14的确认后,无法读取未定义的属性(阅读“错误”)

rjee0c15  于 2023-01-14  发布在  TypeScript
关注(0)|答案(1)|浏览(151)

我有一个在Angular 12上工作的代码,它是一个React式表单,现在我在Angular 14上制作表单,我阅读了新的验证并进行了安排,但我得到了错误,这是控制台上的顺序:
形式价值

{names: 'ddddddd', lastNames: 'sssssssssss', photoLocation: 'dddddd', married: 1, hasBrothersOrSisters: 0, …}
dateOfBirth
: 
"2023-01-07"
hasBrothersOrSisters
: 
0
lastNames
: 
"sssssssssss"
married
: 
1
names
: 
"ddddddd"
photoLocation
: 
"dddddd"

ERROR TypeError: Cannot read properties of undefined (reading 'errors')

success(表示数据已保存)

{idEmployee: 9, names: 'ddddddd', lastNames: 'sssssssssss', photoLocation: 'dddddd', married: 1, …}
dateOfBirth
: 
"2023-01-07T00:00:00"
hasBrothersOrSisters
: 
0
idEmployee
: 
9
lastNames
: 
"sssssssssss"
married
: 
1
names
: 
"ddddddd"
photoLocation
: 
"dddddd"
[[Prototype]]
: 
Object

ERROR TypeError: Cannot read properties of undefined (reading 'errors')

ERROR TypeError: Cannot read properties of undefined (reading 'errors')

这是html

<div class="abs-center">
  <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
   
    <div class="form-group">
      <label>Nombres</label>
      <input type="text" class="form-control"
        formControlName="names"        
        [ngClass]="{ 'is-invalid': submitted && form['names'].errors }"
      />
      <div *ngIf="submitted && form['names'].errors" class="invalid-feedback">
        <div *ngIf="form['names'].errors?.['required']">Los nombres son requeridos</div>
        <div *ngIf="form['names'].errors?.['minlength']">Los nombres deben ser mínimo de 3 caracteres</div>
        <div *ngIf="form['names'].errors?.['maxlength']">Los nombres deben ser de máximo de 30 caracteres</div>
      </div>
    </div>

    <div class="form-group">
      <label>Apellidos</label>
      <input
        type="text"
        formControlName="lastNames"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && form['lastNames'].errors }"
      />
      <div *ngIf="submitted && form['lastNames'].errors" class="invalid-feedback">
        <div *ngIf="form['lastNames'].errors?.['required']">Los apellidos son requeridos</div>
        <div *ngIf="form['lastNames'].errors?.['minlength']">Los apellidos deben ser mínimo de 3 caracteres</div>
        <div *ngIf="form['lastNames'].errors?.['maxlength']">Los apellidosdeben ser de máximo de 30 caracteres</div>
      </div>
    </div>

    <div class="form-group">
      <label>Ubicación de la foto</label>
      <input
        type="text"
        formControlName="photoLocation"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && form['photoLocation'].errors }"
      />
      <div *ngIf="submitted && form['photoLocation'].errors" class="invalid-feedback">
        <div *ngIf="form['photoLocation'].errors?.['required']">Platform name</div>
        <div *ngIf="form['photoLocation'].errors?.['minlength']">El platform name debe ser mínimo de 3 caracteres</div>
        <div *ngIf="form['photoLocation'].errors?.['maxlength']">El platform name ser de máximo de 40 caracteres</div>
      </div>
    </div>      

    <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="radio" id="radio1" [value]=1 
          formControlName="married" >
          <label class="form-check-label" for="radio1">
            Casado
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" id="radio2" [value]=0 
          formControlName="married">
          <label class="form-check-label" for="radio2">
            Soltero
          </label>
        </div> 
      </div>

    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="radio" id="exampleRadio1" [value]=0 
        formControlName="hasBrothersOrSisters" >
        <label class="form-check-label" for="exampleRadio1">
          Tiene hermanos
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="exampleRadio2" [value]=1 
        formControlName="hasBrothersOrSisters">
        <label class="form-check-label" for="exampleRadio2">
          No tiene
        </label>
      </div> 
    </div>

    <div class="form-group">
      <label>Fecha de nacimiento</label>
      <input
        type="date"
        formControlName="dateOfBirth"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && form['formdateOfBirth'].errors }"
      />
      <div *ngIf="submitted && form['formdateOfBirth'].errors" class="invalid-feedback">
        <div *ngIf="form['formdateOfBirth'].errors?.['required']">La fecha de nacimiento es requerida</div>
      </div>
    </div>

    <div class="form-group">
      
      <button type="submit" class="btn btn-primary">
        Guardar
      </button>

      <button type="button" (click)="onReset()" class="btn btn-warning float-right">
        Limpiar
      </button>
      
    </div>
  </form>
</div>

.ts公司

import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Employee } from '../data/employee';
import { EmployeeServiceService } from '../data/employee-service.service';
import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-save-employee',
  templateUrl: './save-employee.component.html',
  styleUrls: ['./save-employee.component.css']
})
export class SaveEmployeeComponent implements OnInit {

  myForm!: FormGroup;    
  submitted = false; 

  constructor(private formBuilder: FormBuilder, private employeeService: EmployeeServiceService) { }

  iniciarFormulario(){
    this.myForm = this.formBuilder.group({                     
      names: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30)]],
      lastNames: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30)]],
      photoLocation: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(40)]],
      married: ['', [Validators.required]],
      hasBrothersOrSisters: ['', [Validators.required]],                     
      dateOfBirth: ['', [Validators.required]]      
    });
}

  ngOnInit(): void {
    this.iniciarFormulario();
  }

  get form(): { [key: string]: AbstractControl; }
  {
      return this.myForm.controls;
  }

  onReset(): void {
    this.submitted = false;
    this.myForm.reset();
  }

  onSubmit() {    
    this.submitted = true;
    console.log("Form value ", this.myForm.value);

    if (this.myForm.invalid) {
      console.log('Error')          
      return
    }     

    this.employeeService.SaveEmployee(this.myForm.value).subscribe(              
                 result => console.log('success ', result),                 
                 error => console.log('error ', error)                 
             );                 
  }  
 

}

我一直在阅读例子,以防我有什么遗漏,但一切似乎都很好。
我更改了错误:错误?
我想也许Angular 对空值更严格。
是不是少了什么?

643ylb08

643ylb081#

检查它现在替换您的Html模板与此
您在errors对象上同时使用了方括号和点符号
替换此form['names']?.errors?.[required]
到这个form['names']?.errors?.required

<div class="abs-center">
  <form [formGroup]="myForm" (ngSubmit)="onSubmit()">

    <div class="form-group">
      <label>Nombres</label>
      <input type="text" class="form-control"
        formControlName="names"
        [ngClass]="{ 'is-invalid': submitted && form['names'].errors }"
      />
      <div *ngIf="submitted && form['names']?.errors" class="invalid-feedback">
        <div *ngIf="form['names']?.errors?.required">Los nombres son requeridos</div>
        <div *ngIf="form['names']?.errors?.minlength">Los nombres deben ser mínimo de 3 caracteres</div>
        <div *ngIf="form['names']?.errors?.maxlength">Los nombres deben ser de máximo de 30 caracteres</div>
      </div>
    </div>

    <div class="form-group">
      <label>Apellidos</label>
      <input
        type="text"
        formControlName="lastNames"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && form['lastNames'].errors }"
      />
      <div *ngIf="submitted && form['lastNames']?.errors" class="invalid-feedback">
        <div *ngIf="form['lastNames'].errors?.required">Los apellidos son requeridos</div>
        <div *ngIf="form['lastNames'].errors?.minlength">Los apellidos deben ser mínimo de 3 caracteres</div>
        <div *ngIf="form['lastNames'].errors?.maxlength">Los apellidosdeben ser de máximo de 30 caracteres</div>
      </div>
    </div>

    <div class="form-group">
      <label>Ubicación de la foto</label>
      <input
        type="text"
        formControlName="photoLocation"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && form['photoLocation'].errors }"
      />
      <div *ngIf="submitted && form['photoLocation']?.errors" class="invalid-feedback">
        <div *ngIf="form['photoLocation']?.errors?.required">Platform name</div>
        <div *ngIf="form['photoLocation']?.errors?.minlength">El platform name debe ser mínimo de 3 caracteres</div>
        <div *ngIf="form['photoLocation']?.errors?.maxlength">El platform name ser de máximo de 40 caracteres</div>
      </div>
    </div>

    <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="radio" id="radio1" [value]=1
          formControlName="married" >
          <label class="form-check-label" for="radio1">
            Casado
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" id="radio2" [value]=0
          formControlName="married">
          <label class="form-check-label" for="radio2">
            Soltero
          </label>
        </div>
      </div>

    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="radio" id="exampleRadio1" [value]=0
        formControlName="hasBrothersOrSisters" >
        <label class="form-check-label" for="exampleRadio1">
          Tiene hermanos
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="exampleRadio2" [value]=1
        formControlName="hasBrothersOrSisters">
        <label class="form-check-label" for="exampleRadio2">
          No tiene
        </label>
      </div>
    </div>

    <div class="form-group">
      <label>Fecha de nacimiento</label>
      <input
        type="date"
        formControlName="dateOfBirth"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && form['formdateOfBirth'].errors }"
      />
      <div *ngIf="submitted && form['formdateOfBirth'].errors" class="invalid-feedback">
        <div *ngIf="form['formdateOfBirth'].errors?.required">La fecha de nacimiento es requerida</div>
      </div>
    </div>

    <div class="form-group">

      <button type="submit" class="btn btn-primary">
        Guardar
      </button>

      <button type="button"  class="btn btn-warning float-right">
        Limpiar
      </button>

    </div>
  </form>
</div>

相关问题