错误类型错误：无法读取空角度表单的属性"错误"，看不到嵌套的表单生成器组

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 无法将发票读取为表单组名称，尽管其余的控件是可读的，没有问题！

<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([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>