如何通过单击相应的删除图标从 UI 中删除字段 - Angular

Question

我有几个使用 matInput 创建的输入字段。我已经按照父子结构创建了这个。我有一个与每个输入字段对应的删除图标。如果我单击删除图标，则必须从 UI 中删除相应的字段。附上图片以供参考，下面是代码。 我有income-field.component 是子组件，而employee-details 是父组件。对此的任何帮助表示赞赏。谢谢！！

收入字段.component.html

<div  [formGroup]="parentForm">
  <mat-form-field >
    <div class="delete-icon" *ngIf="showDeleteIcon" (click)="removeIncomeField($event, i)">
      <img src="/assets/icons/delete_income.png"></div>

    <input matInput [(value)]="value" [placeholder]="placeholder" type="number" (input)="change($event.target.value)"
      [formControlName]="name" />
  </mat-form-field>
</div>

income-field.component.ts:


export class IncomeFieldComponent {
  @Input() placeholder;
  @Input() value;
  @Input() name;
  @Input() showDeleteIcon;
  @Output() textValue = new EventEmitter();
  @Output() deleteIncomeField= new EventEmitter();
  @Input() parentForm: FormControl;
  isActive = false;

  removeIncomeField(event: any) {
    this.deleteIncomeField.emit(event);
  }
change(value) {
    this.value = +value;
    this.textValue.emit(this.value);
  }
}

employee-details.component.html:

  <app-income-field placeholder="Business income"  [value]=""
            type="number" name="businessIncome" (textValue)="getTextValue($event, 'businessIncome')" [showDeleteIcon]="true"
              [parentForm]="employee_info_form" id="business" (deleteIncomeField)="deleteSelectedField($event)">
            </app-income-field>

  <app-income-field placeholder="Real estate" [showDeleteIcon]="true" [value]=""
              type="number" name="realEstateIncome" (deleteIncomeField)="deleteSelectedField($event)" (textValue)="getTextValue($event, 'realEstateIncome')"
              [parentForm]="additional_info_form">
            </app-income-field>

Answer 1

我可以想到至少两种角度的方法来做到这一点：

用*ngIf 删除

export class EmployeeDetailsComponent {
  public showBusinessIncome = true;
  public showRealEstate = true;

  removeIncomeField(input: number) {
    if(input === 1) {
       this.showBusinessIncome = false;
    }
    else if (input === 2) {
       this.showRealEstate = false;
    }
  }
}

在html中

  <app-income-field placeholder="Business income"  [value]=""
            type="number" name="businessIncome" (textValue)="getTextValue($event, 'businessIncome')" [showDeleteIcon]="true" *ngIf="showBusinessIncome"
              [parentForm]="employee_info_form" id="business" (deleteIncomeField)="deleteSelectedField(1)">
            </app-income-field>

  <app-income-field placeholder="Real estate" [showDeleteIcon]="true" [value]=""
              type="number" name="realEstateIncome" *ngIf="showRealEstate" (deleteIncomeField)="deleteSelectedField(2)" (textValue)="getTextValue($event, 'realEstateIncome')"
              [parentForm]="additional_info_form">
            </app-income-field>

使用响应式表单制作IncomeFieldComponent 自定义控件和句柄

这有点复杂，但我建议关注this material guide

然后您将能够从FormGroup 中正确删除控件

Angular form group guide

const myForm = new FormGroup({
  businessIncome: new FormControl('businessIncome'),
  realEaste: new FormControl('realEstate')
});

this.myForm.removeControl('businessIncome', null);

Answer 2

我不确定实现这一目标的解决方案有多简单。但我已经设法实现了解决方案。这可能不是最好的答案，因为我必须为 2 个字段编写 2 个单独的函数。但是下面的代码有效，我对多行代码不满意。非常感谢对解决方案进行任何可能的重构。谢谢！！

收入.component.html：

<div  [formGroup]="parentForm">
  <mat-form-field >
   <div class="delete-icon" *ngIf="showDeleteIconForBusiness" (click)="removeBusinessField($event)">
      <img src="/assets/icons/delete_income.png"></div>
<!--added another div for real estate field-->
<div class="delete-icon" *ngIf="showDeleteIconForRealestate" (click)="removeRealEstateField($event)">
        <img src="/assets/icons/delete_income.png"></div>

    <input matInput [(value)]="value" [placeholder]="placeholder" type="number" (input)="change($event.target.value)"
      [formControlName]="name" />
  </mat-form-field>
</div>


export class IncomeFieldComponent {
  @Input() placeholder;
  @Input() value;
  @Input() name;
   @Input() showDeleteIconForBusiness;
  @Input() showDeleteIconForRealestate
  @Output() textValue = new EventEmitter();
  @Output() deleteBusinessField= new EventEmitter();
  @Output() deleteRealestateField=new EventEmitter();
  @Input() parentForm: FormControl;
  isActive = false;

 removeBusinessField(event: any) {
    this.deleteBusinessField.emit(event);
  }
  removeRealEstateField(event:any) {
    this.deleteRealestateField.emit(event);
  }
change(value) {
    this.value = +value;
    this.textValue.emit(this.value);
  }
}

employee-details.component.html:

  <app-income-field placeholder="Business income"  [value]=""
            type="number" name="businessIncome" (textValue)="getTextValue($event, 'businessIncome')" [showDeleteIconForBusiness]="true"
              [parentForm]="employee_info_form" (deleteBusinessField)="deleteBusinessField()">
            </app-income-field>

  <app-income-field placeholder="Real estate" [showDeleteIconForRealestate]="true" [value]=""
              type="number" name="realEstateIncome" (deleteRealestateField)="deleteRealestateField()" (textValue)="getTextValue($event, 'realEstateIncome')"
              [parentForm]="additional_info_form">
            </app-income-field>

Answer 3

您可以像这样为每个字段添加特定的 id：

<mat-form-field id="name>...</mat-form-field> 然后用

删除带有纯 javascript 的字段

document.getElementById('name').remove()

但 IMO 只是添加另一个变量来隐藏元素，然后在保存功能发生时检查变量。