Javascript 角度：是否使用NgIf删除组件、内部窗体和元素？

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

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

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

见下面的声明

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

---

我想说的是使用反应式表单，这样您就可以进行表单重置。它不是双向绑定，因此您可以通过这种方式更好地控制数据

因此，在下拉更改中，ngIf将创建一个新的被动表单，其中没有数据

检查如何创建反应式表单

---

我猜测，您使用共享组件（父组件）提供的数据进行绑定，子组件由于双向绑定而更改，因此保持不变。

我认为您的内部组件（应用程序地址邮寄标准表单、应用程序地址邮寄军事表单…）可以有一个关于formGroup和*ngIf的@Input

@Input()group:FormGroup

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

只显示“标题”和“军事”，但这只是一个想法。这一切都取决于创建表单和表单组的方式和位置

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

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

并且只将“可见”作为参数传递

又是这样的形式

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

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

...

最好的方法是将数据绑定到列表（表单和模型）hi@pixelbits我不想绑定数据而是删除，请随意写下答案或stackblitz，我可以发送点，谢谢代码中的下拉列表是什么？当您将数据绑定到列表时，所有组件/元素/表单都会自动销毁Yok，然后我需要更多的ts代码和至少一个组件来尝试解决这个问题。组件在其各自的ngIf设置为true时会被重新创建，因此这一定是您在数据中同时更改的内容。当用户编辑其中一个表单时，您是否在源数据中设置了任何数据？

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

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