如何验证Angular中嵌套表单组字段的错误消息

Question

嗨，我是新来的有角度的人，我正在尝试实现表单验证并使用下面的代码，我的问题是嵌套的表单组字段，我在日志中遇到错误TypeError：无法读取null的“ touched”属性可以有人帮助我请..

.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>

Answer 1

请注意以下事实：您已经按名为“技能”的文件夹将表单嵌套了一层。因此，您需要以此为荣，

employeeForm.get('skills.skillName').touched

Answer 2

您是否在app.module中导入了FormsModule？

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

....

  imports: [
    FormsModule
  ]

  ...