Angular * ngIf для значения вложенной формы группы

Question

Я хочу реализовать * ngIf для некоторого div ...

Не работает:

*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: ""
      })
    });

Как к этому?

Answer 1

Вам нужно будет использовать .get() лучше, что-то вроде этого:

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

.get() гарантирует, что вы всегда получите значение, даже если элемент управления отключен

Answer 2

Используя библиотеку ngx-sub-form , было бы проще разбить вашу форму на компоненты суб-формы, и это выглядело бы следующим образом:

<code><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 }}

Вот живая демонстрация: https://stackblitz.com/edit/so-answer-angular-ngif-for-nested-formgroup-value?file=src/app/form/form.component.html

Edit:

Если вы хотите пойти дальше, я только что опубликовал пост в блоге, чтобы объяснить множество вещей о формах и ngx-sub-form здесь https://dev.to/maxime1992/building-scalable-robust-and-type-safe-forms-with-angular-3nf9