我有一个在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 对空值更严格。
是不是少了什么?
1条答案
按热度按时间643ylb081#
检查它现在替换您的Html模板与此
您在
errors
对象上同时使用了方括号和点符号替换此
form['names']?.errors?.[required]
到这个
form['names']?.errors?.required