Как удалить поле из пользовательского интерфейса, щелкнув соответствующий значок удаления - Angular

Question

У меня есть пара полей ввода, созданных с помощью matInput. Я следовал родительской дочерней структуре, чтобы создать это. У меня есть значок удаления, соответствующий каждому полю ввода. Если я щелкаю значок удаления, соответствующее поле должно быть удалено из пользовательского интерфейса. Прикрепленное изображение для справки и ниже код. У меня есть доход-field.component, который является дочерним компонентом, и сведения о сотруднике, который является родительским компонентом. Любая помощь по этому вопросу приветствуется. Спасибо !!

доход-поле.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

Я могу придумать как минимум два angular способа сделать это:

Удалить с помощью *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 и обработайте его с помощью реактивных форм

Это немного сложнее, но я бы предложил следовать этому руководству по материалам

Тогда вы сможете правильно удалить элемент управления из FormGroup

Angular справочника по групповым формам

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

Вы можете добавить для каждого поля, указав c идентификатор, например:

<mat-form-field id="name>...</mat-form-field>, а затем удалить поле с чистым javascript с помощью

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

но IMO просто добавляет другие переменные, чтобы скрыть элемент, а затем проверяет переменные, когда происходит функция сохранения.