Angular: удаление компонентов, внутренних форм и элементов с помощью NgIf?

Question

Как удалить элементы Dom и компоненты с помощью * NgIf или любой функции Ng?

У меня есть раскрывающийся список;в зависимости от выпадающего, он будет отображать различные формы. Когда пользователь изменяет тип раскрывающегося списка, а затем возвращается к тому же типу раскрывающегося списка - данные предыдущей формы все еще существуют, когда их следует очистить.

Каков наилучший способ удаления всех форм, переменных и самого компонентакогда выпадающий список меняется?

См. утверждение ниже,

<div class = "addressformtotal">
    <div class = "addressblock">
        <app-address-formatheader-form></app-address-formatheader-form>
        <div *ngIf="formatMessage?.addressFormatDescription.includes('Standard')"><app-address-mailing-standard-form></app-address-mailing-standard-form></div>
        <div *ngIf="formatMessage?.addressFormatDescription.includes('Military')"><app-address-mailing-military-form></app-address-mailing-military-form></div>
        <div *ngIf="formatMessage?.addressFormatDescription.includes('Post')"><app-address-mailing-pobox-form></app-address-mailing-pobox-form></div>
        <div *ngIf="formatMessage?.addressFormatDescription.includes('Free')"><app-address-free-form></app-address-free-form></div>
        <div *ngIf="formatMessage?.addressFormatDescription.includes('Rural')"><app-address-mailing-rural-form></app-address-mailing-rural-form></div>
        <div *ngIf="formatMessage?.addressFormatDescription.includes('International')"><app-address-mailing-international-form></app-address-mailing-international-form></div>
    </div>

Answer 1

Я думаю, что ваши внутренние компоненты (app-address-mailing-standard-form, app-address-mailing-military-form ...) могут иметь @Input about formGroup и * ngIf

@Input()group:FormGroup

<form *ngIf="group" [formGroup]="group">
    <input formControlName="prop1">
     ...
</form>

Итак, ваш main.app может быть похож на

<app-address-formatheader-form 
         [group]="form.get("header")>
</app-address-formatheader-form>
<app-address-mailing-standard-form 
         [group]="form.get('mailing')">
</app-address-mailing-standard-form>
<app-address-mailing-standard-form 
         [group]="form.get('military')">
</app-address-mailing-standard-form>
...

Итак, если ваш main.app создаст форму вроде

this.form=new FormGroup({
   header:new FormGroup({...}),
   military:new FormGroup({...})
})

Показывать только «заголовок» и «военный»,но это всего лишь идея. Все зависит от того, каким образом и где вы создаете форму и formGroup.

Если вы создаете fromGroup внутри компонентов, используйте входные параметры для установки, например

@Input() set visible(value)
{
    if (visible)
       this.group=new formGroup({...})
}

И передайте только в качестве аргумента«видимый»

<app-address-formatheader-form [visible]="variable"></app-address-formatheader-form>

снова в форме, подобной

<form *ngIf="group" [formGroup]="group">
    <input formControlName="prop1">
     ...
</form>

Answer 2

Я бы сказал, используйте реактивные формы, чтобы вы могли сбросить форму. Это не двухстороннее связывание, поэтому вы можете намного лучше контролировать свои данные.

Итак, при изменении выпадающего списка ngIf создаст новую реактивную форму, в которой не будет данных.

Проверьте, какдля создания реактивных форм здесь

Я предполагаю, что вы связываетесь с данными, предоставленными общим компонентом (родительским), которые потомки изменяются из-за двухстороннего связывания и т. д. оставить без изменений.