Angular *ngIf 用于嵌套表单组值答案

【问题标题】：Angular *ngIf for nested formgroup valueAngular *ngIf 用于嵌套表单组值
【发布时间】：2019-06-16 23:57:19
【问题描述】：

我想为某些 div 实现 *ngIf...

不起作用：

*ngIf="postForm.value.osnovne.sekcija === vozila"

还有

*ngIf="postForm.controls['osnovne'].value.sekcija === vozila

这是我的表格：

this.postForm = this.fb.group({
      osnovne: this.fb.group({
        sekcija: vozila,
        cena: "",
        dogovor: "",
        opis: ""
      }),
      detaljne: this.fb.group({
        name: "",
        value: ""
      }),
      imagePath: this.fb.group({
        data: ""
      })
    });

如何做到这一点？

【问题讨论】：

标签： angular angular-forms

【解决方案1】：

你需要更好地使用.get()，像这样：

*ngIf="postForm.get('osnovne').get('sekcija').value === vozila"

.get() 将确保即使控件被禁用，您也将始终获得该值

【讨论】：

【解决方案2】：

使用ngx-sub-form 库可以更轻松地将表单分解为子表单组件，如下所示：

<form [formGroup]="formGroup">
    <app-osnovne-form [formControlName]="formControlNames.osnovne"></app-osnovne-form>
</form>

<div *ngIf="formGroupValues.osnovne?.sekcija === 'vozila'; else noVozila">
  "vozila" is the current value of osnovne.sekcija
</div>

<ng-template #noVozila>
  "vozila" is not the current value of osnovne.sekcija
</ng-template>

<pre>{{ formGroupValues | json }}</pre>

这是一个现场演示：https://stackblitz.com/edit/so-answer-angular-ngif-for-nested-formgroup-value?file=src/app/form/form.component.html

编辑：

如果你想更进一步，我刚刚发布了一篇博文，在这里https://dev.to/maxime1992/building-scalable-robust-and-type-safe-forms-with-angular-3nf9

解释了很多关于表单和 ngx-sub-form 的事情

【讨论】：