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">&nbsp; &nbsp; <input formControlName="prop1">&nbsp; &nbsp; &nbsp;...</form>所以，你的 main.app 可以像<app-address-formatheader-form&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[group]="form.get("header")></app-address-formatheader-form><app-address-mailing-standard-form&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[group]="form.get('mailing')"></app-address-mailing-standard-form><app-address-mailing-standard-form&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[group]="form.get('military')"></app-address-mailing-standard-form>...所以，如果你的 main.app 创建像this.form=new FormGroup({&nbsp; &nbsp;header:new FormGroup({...}),&nbsp; &nbsp;military:new FormGroup({...})})只显示“header”和“military”，但这只是一个想法。一切都取决于您创建表单和表单组的方式和位置。如果您在组件内部创建 fromGroup，请在输入中使用 setter，例如@Input() set visible(value){&nbsp; &nbsp; if (visible)&nbsp; &nbsp; &nbsp; &nbsp;this.group=new formGroup({...})}并且仅将“可见”作为参数传递<app-address-formatheader-form [visible]="variable"></app-address-formatheader-form>再次像这样的形式<form *ngIf="group" [formGroup]="group">&nbsp; &nbsp; <input formControlName="prop1">&nbsp; &nbsp; &nbsp;...</form>

Answer 2

我会说使用反应式形式，以便您可以进行形式重置。这不是双向绑定，因此您可以通过这种方式更好地控制数据。因此，在下拉列表更改时，ngIf 将创建一个新的响应式表单，其中没有数据。在此处查看如何创建反应式表单我对正在发生的事情的猜测是，您绑定了从共享组件（父组件）提供的数据，子组件由于双向绑定而更改，因此保持不变。