无法读取 angular 中嵌套表单组未定义的 属性 'hasError'

Question

在为我的嵌套组创建验证时，我一直遇到 "Cannot read property 'hasError' of undefined" 错误。在主要组中，我没有问题，但如果它在嵌套表单组中，那就是问题所在。请在下面查看我的代码：

<form
    [formGroup]="form"
    (ngSubmit)="onSubmit(form)"
    class="border border-light p-5"
  >
    <div class="form-group">
      <input
        type="text"
        placeholder="Plaza Name"
        formControlName="name"
        id="name"
        class="form-control mb-4"
        mdbInput
        required
      />
      <span
        *ngIf="formHasError('name', 'required') && isSubmitted"
        style="color: red;"
      >
        Plaza Name is required
      </span>
    </div>
    <div class="form-group">
      <input
        type="number"
        placeholder="Plaza Code"
        formControlName="code"
        id="code"
        class="form-control mb-4"
        mdbInput
        required
      />
      <span
        *ngIf="formHasError('code', 'required') && isSubmitted"
        style="color: red;"
      >
        Plaza code is required
      </span>
    </div>

    <div formGroupName="lanes">
      <div class="form-group">
        <input
          type="number"
          placeholder="Lane Number"
          formControlName="number"
          id="number"
          class="form-control mb-4"
          mdbInput
          required
        />
        <span
          *ngIf="formHasError('lanes.number', 'required') && isSubmitted"
          style="color: red;"
        >
          Lane number is required
        </span>
      </div>
      <div class="form-group">
        <select
          formControlName="type"
          id="type"
          class="browser-default custom-select mb-4"
          mdbInput
          required
        >
          <option *ngFor="let type of typeSelect" [value]="type.label">{{
            type.label
          }}</option>
        </select>
        <!-- <span
          *ngIf="formHasError('lanes.type', 'required') && isSubmitted"
          style="color: red;"
        >
          Select a lane type
        </span> -->
      </div>
    </div>
    <button
      mdbBtn
      color="info"
      outline="true"
      block="true"
      class="z-depth-0 my-4 waves-effect"
      mdbWavesEffect
      type="submit"
    >
      Send
    </button>
 </form>

这个在ts文件里

createForm() {
    this.form =  this.fb.group({
      name: [null, Validators.required],
      code: [null, Validators.required],
      lanes: this.fb.group({
        number: [null, Validators.required],
        type: [null, Validators.required]
      })
    });
}

formHasError(controlName: string, errorName: string) {
   return this.form.controls[controlName].hasError(errorName);
}

你能告诉我怎么做吗？谢谢。

Answer 1

因为你的主表单中有一个表单组（通道）所以如果你调用 this.form.controls['lanes'] 它会 return 你是一个带有控件的表单组而不是表单控件所以你应该考虑你的子表单函数，你的 formHasError 应该是：

if(this.form.controls[controlName].controls) {
        return this.form.controls[controlName]['controls'].hasError(errorName);
    } else {
        return this.form.controls[controlName].hasError(errorName);
    }

Answer 2

个人；我选择了这样的解决方案，它更简单、更清晰，无需使用额外的功能

<form
    [formGroup]="form"
    (ngSubmit)="onSubmit(form)"
    class="border border-light p-5"
  >
    <div class="form-group">
      <input
        type="text"
        placeholder="Plaza Name"
        formControlName="name"
        id="name"
        class="form-control mb-4"
        mdbInput
        required
      />
      <span
        *ngIf="form.name.hasError('required') && isSubmitted"
        style="color: red;"
      >
        Plaza Name is required
      </span>
    </div>
    <div class="form-group">
      <input
        type="number"
        placeholder="Plaza Code"
        formControlName="code"
        id="code"
        class="form-control mb-4"
        mdbInput
        required
      />
      <span
        *ngIf="form.code.hasError('required') && isSubmitted"
        style="color: red;"
      >
        Plaza code is required
      </span>
    </div>

    <div formGroupName="lanes">
      <div class="form-group">
        <input
          type="number"
          placeholder="Lane Number"
          formControlName="number"
          id="number"
          class="form-control mb-4"
          mdbInput
          required
        />
        <span
          *ngIf="form.lanes.number.hasError('required') && isSubmitted"
          style="color: red;"
        >
          Lane number is required
        </span>
      </div>
      <div class="form-group">
        <select
          formControlName="type"
          id="type"
          class="browser-default custom-select mb-4"
          mdbInput
          required
        >
          <option *ngFor="let type of typeSelect" [value]="type.label">{{
            type.label
          }}</option>
        </select>
        <!-- <span
          *ngIf="formHasError('lanes.type', 'required') && isSubmitted"
          style="color: red;"
        >
          Select a lane type
        </span> -->
      </div>
    </div>
    <button
      mdbBtn
      color="info"
      outline="true"
      block="true"
      class="z-depth-0 my-4 waves-effect"
      mdbWavesEffect
      type="submit"
    >
      Send
    </button>
 </form>

Answer 3

stackblitz

formHasError(controlName: string, errorName: string) {
    const control=this.form.get(controlName);
    return control?control.hasError(errorName):false;
  }

Answer 4

你只需要使用get方法

formHasError(controlName: string, errorName: string) : boolean {
   return this.form.get(controlName).hasError(errorName);
}

get method retrieves a child control given the control's name or path.

stackblitz demo