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

Posted 2023-03-13

【中文标题】Angular：使用 NgIf 删除组件、内部表单和元素？

【英文标题】：Angular: Delete Components, Inside Forms, and Elements with NgIf?

【发布时间】：2020-03-06 21:09:45

【问题描述】：

如何使用 *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>

【问题讨论】：

最好的方法是将数据绑定到一个列表（表单和模型）

嗨@pixelbits 我不是在尝试数据绑定而是删除，请随意写答案或stackblitz，我可以发送积分，谢谢

代码中的下拉菜单在哪里？

当您将数据绑定到列表时，所有组件/元素/表单都会自动销毁

【参考方案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”，但这只是一个想法。一切都取决于您创建表单和表单组的方式和位置。

如果您在组件内创建 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>

【参考方案2】：

我会说使用响应式表单，以便您可以重置表单。它不是双向绑定，因此您可以通过这种方式更好地控制数据。

所以在下拉列表更改时，ngIf 将创建一个新的响应式表单，其中没有数据。

查看如何创建响应式表单here

我对正在发生的事情的猜测是，您绑定了从共享组件（父组件）提供的数据，子组件由于双向绑定而发生更改，因此保持不变。

【讨论】：

好的，那么我需要更多的 ts 代码和至少一个组件来尝试解决这个问题。组件会在其各自的 ngIf 设置为 true 时重新创建，因此它必须是您同时在数据中更改的内容。

当您的用户编辑其中一个表单时，您是否在源数据中设置了任何数据？