javascript - Angular:使用 NgIf 删除组件、内部表单和元素？

Question

如何使用 *NgIf 或任何 Ng 函数删除 Dom 元素和组件？

我有一个下拉列表；根据下拉菜单，它将显示不同的形式。当人们更改下拉类型然后返回到相同的下拉类型时 - 以前的表单数据仍然存在，应该清除它。

下拉列表更改时删除所有表单、变量和组件本身的最佳方法是什么？

见下面的声明，

<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 ...)可以有一个关于 formGroup 和 *ngIf 的@Input

@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({...})
})

只显示“header”和“military”，但这只是一个想法。一切都取决于您创建表单和 formGroup 的方式和位置。

如果您在组件内部创建 fromGroup，请在输入中使用 setter，例如

@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>