ERROR TypeError：无法读取空角度形式的属性“错误”，看不到嵌套的FormBuilder组

Question

嵌套表单组对于html文件不可读！

this.addSaleForm = this.formBuilder.group({
      storeId: ['', [Validators.required]],
      clientId: ['', [Validators.required]],
      saleDateTime: ['', [Validators.required]],
      amountPaid: ['', [Validators.required, Validators.minLength(1)]],
      invoice: this.formBuilder.group({
        discount: ['', [Validators.required, Validators.min(0), Validators.max(100)]],
        description: ['', [Validators.minLength(4), Validators.maxLength(250)]],
        serial: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(10)]],
        signture: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
      })
    });

该组件的html无法将invoice作为formGroupName读取，尽管for控件的其余部分是可读的，没有问题！

<div [formGroupName]="invoice">
      <!-- Row of Serial & Signture & DateTime -->
      <div class="form-row">
        <!-- Serial Form Group -->
        <div class="col mb-3">
          <input
            type="number"
            [ngClass]="{
              'is-invalid':
                addSaleForm.get('serial').errors &&
                addSaleForm.get('serial').touched
            }"
            class="form-control"
            formControlName="serial"
            placeholder="Serial"
          />
          <div
            class="invalid-feedback"
            *ngIf="
              addSaleForm.get('serial').hasError('required') &&
              addSaleForm.get('serial').touched
            "
          >
            Invoice Serial is required
          </div>
        </div>
  </div>
</div>

Answer 1

html的组件无法读取发票作为formGroupName尽管其余的for控件都可以毫无问题地读取！

问题是，您正在为formGroupName（[formGroupName]）使用属性绑定，应该仅使用formGroupName。

要访问嵌套控件serial，您可以执行以下操作：

---

[ngClass]="{
  'is-invalid':
    addSaleForm.get('invoice.serial').errors &&
    addSaleForm.get('invoice.serial').touched
}"

*ngIf="
  addSaleForm.get('invoice.serial').hasError('required') &&
  addSaleForm.get('invoice.serial').touched
"

... or even better IMHO:

*ngIf="
  addSaleForm.hasError('required', 'invoice.serial') &&
  addSaleForm.get('invoice.serial').touched
"

完整模板（稍加重构-使用[class]绑定和“ as”语法为串行form control创建引用）：
<div formGroupName="invoice">
  <!-- Row of Serial & Signture & DateTime -->
  <div class="form-row">
    <!-- Serial Form Group -->
    <div class="col mb-3" *ngIf="addSaleForm.get('invoice.serial') as serialFormControl">
      <input
        type="number"
        [class.invalid]="serialFormControl.errors && serialFormControl.touched"
        class="form-control"
        formControlName="serial"
        placeholder="Serial"
      />
      <div
        class="invalid-feedback"
        *ngIf="serialFormControl.hasError('required') && serialFormControl.touched"
      >
        Invoice Serial is required
      </div>
    </div>
  </div>
</div>

Answer 2

[ngClass]="{'is-invalid':
    addSaleForm.get('serial') && // <--- this will help to avoid an error
    addSaleForm.get('serial').errors &&
    addSaleForm.get('serial').touched
}"

尝试使用以下代码来访问嵌套值：

addSaleForm.controls['invoice'].value.serial;

Answer 3

invoice.serial

<div formGroupName="invoice">
      <!-- Row of Serial & Signture & DateTime -->
      <div class="form-row">
        <!-- Serial Form Group -->
        <div class="col mb-3">
          <input
            type="number"
            [ngClass]="{
              'is-invalid':
                addSaleForm.get('invoice.serial').errors &&
                addSaleForm.get('invoice.serial').touched
            }"
            class="form-control"
            formControlName="serial"
            placeholder="Serial"
          />
          <div
            class="invalid-feedback"
            *ngIf="
              addSaleForm.get('invoice.serial').hasError('required') &&
              addSaleForm.get('invoice.serial').touched
            "
          >
            Invoice Serial is required
          </div>
        </div>
    </div>
  </div>