angular-form-system
  1. Directives
  2. FormArrayItemRemoveButtonDirective

File

src/lib/directives/array/form-array-item-remove-button.directive.ts

Extends

FormArrayItemButton

Implements

AfterViewInit OnDestroy

Metadata

Selector button[rxapFormArrayItemRemoveButton]
Standalone true

Index

Properties
Methods
Inputs
HostBindings
HostListeners

Inputs

shouldTemporarilyDeleted
Type : function
Default value : () => false
Defined in src/lib/directives/array/form-array-item-remove-button.directive.ts:24

A function that returns if the control should be temporarily deleted. true - in the given form group the deleted control is set to true false - the form group is removed from the (parent) form array

HostBindings

disabled
Type : boolean
Inherited from FormArrayItemButton
Defined in FormArrayItemButton:47
type
Type : string
Default value : 'button'
Inherited from FormArrayItemButton
Defined in FormArrayItemButton:31

HostListeners

click
Defined in src/lib/directives/array/form-array-item-remove-button.directive.ts:27

Methods

Protected onClick
onClick()
Decorators :
@HostListener('click')
Inherited from FormArrayItemButton
Defined in FormArrayItemButton:27
Returns : void
Protected updateDisplayStyle
updateDisplayStyle()
Inherited from FormArrayItemButton
Defined in FormArrayItemButton:36
Returns : void

Properties

Protected deletedControl
Type : RxapFormControl<boolean>
Inherited from FormArrayItemButton
Defined in FormArrayItemButton:34
Protected formArray
Type : RxapFormArray
Inherited from FormArrayItemButton
Defined in FormArrayItemButton:33
Protected formGroup
Type : RxapFormGroup<literal type>
Inherited from FormArrayItemButton
Defined in FormArrayItemButton:32
type
Type : string
Default value : 'button'
Decorators :
@HostBinding('type')
Inherited from FormArrayItemButton
Defined in FormArrayItemButton:31 
import {
  AfterViewInit,
  Directive,
  HostListener,
  Input,
  OnDestroy,
} from '@angular/core';
import { RxapFormGroup } from '@rxap/forms';
import { FormArrayItemButton } from './form-array-item-button';

// TODO : move to rxap packages
@Directive({
  selector: 'button[rxapFormArrayItemRemoveButton]',
  standalone: true,
})
export class FormArrayItemRemoveButtonDirective extends FormArrayItemButton implements AfterViewInit, OnDestroy {

  /**
   * A function that returns if the control should be temporarily deleted.
   * true - in the given form group the deleted control is set to true
   * false - the form group is removed from the (parent) form array
   */
  @Input()
  public shouldTemporarilyDeleted: (formGroup: RxapFormGroup) => boolean = () => false;

  @HostListener('click')
  protected onClick() {
    const templateDelete = this.shouldTemporarilyDeleted(this.formGroup);
    if (templateDelete) {
      this.deletedControl.setValue(true);
    } else {
      this.formArray.removeAt(this.index);
    }
  }

  protected updateDisplayStyle() {
    if (this.isDeleted) {
      this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');
    } else {
      this.renderer.removeStyle(this.elementRef.nativeElement, 'display');
    }
  }

}

results matching ""

    No results matching ""