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

Question

嗨，我是 angular 的新手，我正在尝试实施表单验证并使用以下代码，我的问题是嵌套表单组字段我在日志中收到错误类型错误：无法读取属性 '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>

Answer 1

请注意，您已经通过名为 'skills' 的文件夹将表单嵌套了一层。因此，你需要兑现，

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

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

How to validate error messages for nested form group fields in angular

angular

angular-formbuilder

.ts

.html