嗨，我是 Angular 的新手，我正在尝试实现表单验证并使用下面的代码，我的问题是嵌套表单组字段我在日志中遇到错误 TypeError: Cannot read property 'touched' of null 有人可以帮助我吗？
.ts
ngOnInit() {
this.employeeForm = this.fb.group({
fullName: ['',[Validators.required,Validators.minLength(2), Validators.maxLength(10)]],
email: ['',[Validators.required,Validators.email]],
skills: this.fb.group({
skillName: ['',[Validators.required]],
experienceInYears: ['',Validators.required],
proficiency: ['']
})
});
}
.html
<form class="form-horizontal" [formGroup]="employeeForm" (ngSubmit)="onSubmit()">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Create Employee</h3>
</div>
<div class="panel-body">
<div class="form-group" [ngClass]="{'has-error':((employeeForm.get('fullName').touched ||
employeeForm.get('fullName').dirty) &&
employeeForm.get('fullName').errors)}">
<label class="col-sm-2 control-label" for="fullName">Full Name</label>
<div class="col-sm-8">
<input id="fullName" type="text" class="form-control" formControlName="fullName">
<span class="help-block" *ngIf="((employeeForm.get('fullName').touched ||
employeeForm.get('fullName').dirty) &&
employeeForm.get('fullName').errors)">
<span *ngIf="employeeForm.get('fullName').errors.required">
Full Name is required
</span>
<span *ngIf="employeeForm.get('fullName').errors.minlength ||
employeeForm.get('fullName').errors.maxlength">
Full Name must be greater than 2 characters and less than 10 characters
</span>
</span>
</div>
</div>
<div class="form-group" [ngClass]="{'has-error':((employeeForm.get('email').touched ||
employeeForm.get('email').dirty) &&
employeeForm.get('email').errors)}">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-8">
<input id="email" type="text" class="form-control" formControlName="email">
<span class="help-block" *ngIf="((employeeForm.get('email').touched ||
employeeForm.get('email').dirty) &&
employeeForm.get('email').errors)">
<span *ngIf="employeeForm.get('email').errors.required">
Email is required
</span>
<span *ngIf="employeeForm.get('email').errors.email">
Valid Email is required
</span>
</span>
</div>
</div>
//**PROBLEM IN THIS BLOCK**
<div formGroupName="skills">
<div class="form-group" [ngClass]="{'has-error':((employeeForm.get('skillName').touched ||
employeeForm.get('skillName').dirty) &&
employeeForm.get('skillName').errors)}">
<label class="col-sm-2 control-label" for="skillName">skill Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" formControlName="skillName">
<span class="help-block" *ngIf="((employeeForm.get('skillName').touched ||
employeeForm.get('skillName').dirty) &&
employeeForm.get('skillName').errors)">
<span class="help-block" *ngIf="employeeForm.get('skillName').errors.required">
Skill is required
</span>
</span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" formControlName="experienceInYears">
<span class="help-block" *ngIf="((employeeForm.get('experienceInYears').touched ||
employeeForm.get('experienceInYears').dirty) &&
employeeForm.get('experienceInYears').errors)">
<span class="help-block" *ngIf="employeeForm.get('experienceInYears').errors.required">
Experience is required
</span>
</span>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="btn-toolbar">
<button class="btn btn-primary" type="submit">Save</button>
<button class="btn btn-primary" type="submit" (click)="onLoadDataClick()">Load Data</button>
</div>
</div>