npm package: @ngil/form-cva
Description: The @ngil/form-cva provides facilities to create FormControl, FormGroup control value accessors. It was created to be used by presentational components.
Latest version: 5.4.0

# @ngil/form-cva

The @ngil/form-cva provides facilities to create FormControl, FormGroup control value accessors.
It was created to be used by presentational components.

## Installation

npm install @ngil/form-cva

## FormControl CVA

input.component.ts

```
import { AfterViewInit, ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core';
import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { AbstractInputComponent } from '@ngil/form-cva';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'ngil-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NgilInputComponent),
      multi: true
    }
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NgilInputComponent extends AbstractInputComponent<string | number> implements AfterViewInit {
  @Input() type = 'text';

  control = new FormControl();

  ngAfterViewInit() {
    this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
      this.onChangeInput(value);
    });
  }

  writeValue(value: string | number): void {
    this.control.setValue(value);
  }

  onChangeInput(value: string | number): void {
    if (this.type === 'number') {
      value = +value;
    }
    if (this.onChange) {
      this.onChange(value);
    }
  }
}
```

form.component.html
https://github.com/allanartuso/ngdux/tree/master/libs/demo/ui/properties/src/lib/address-form

```
<form [formGroup]="formGroup">
  <ngil-input label="Country" formControlName="country"></ngil-input>
  <ngil-input label="City" formControlName="city"></ngil-input>
  <ngil-input label="Zip code" formControlName="zipCode"></ngil-input>
  <ngil-input label="Street" formControlName="street"></ngil-input>
  <ngil-input label="Street number" formControlName="streetNumber"></ngil-input>
</form>

```

## FormGroup CVA

Stackblitz: https://stackblitz.com/edit/angular-fieejt?file=src/form.ts

address-form.component.ts

```
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AddressDto } from '@demo/demo/data-model/properties';
import { AbstractFormGroupComponent, FlatFormControlsOf, createControlValueAccessorProviders } from '@ngil/form-cva';

@Component({
  selector: 'demo-address-form',
  templateUrl: './address-form.component.html',
  styleUrls: ['./address-form.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: createControlValueAccessorProviders(AddressFormComponent)
})
export class AddressFormComponent extends AbstractFormGroupComponent<AddressDto> {
  formGroup = new FormGroup<FlatFormControlsOf<AddressDto>>({
    country: new FormControl(''),
    city: new FormControl(''),
    zipCode: new FormControl(''),
    street: new FormControl(''),
    streetNumber: new FormControl('')
  });
}
```

address-form.component.html

```
<form [formGroup]="formGroup">
  <input formControlName="country" />
  <input formControlName="city" />
  <input formControlName="zipCode" />
  <input formControlName="street" />
  <input formControlName="streetNumber" />
</form>
```

form.component.ts

```
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { PropertyDto } from '@demo/demo/data-model/properties';
import { AbstractFormComponent, FlatFormControlsOf } from '@ngil/form-cva';

@Component({
  selector: 'demo-property-form',
  templateUrl: './property-form.component.html',
  styleUrls: ['./property-form.component.scss']
})
export class PropertyFormComponent {

  formGroup = new FormGroup<FlatFormControlsOf<PropertyDto>>({
    address: new FormControl(null),
    ...
  });
}
```

form.component.html

```
<form [formGroup]="formGroup">
  <demo-address-form formControlName="address"></demo-address-form>
</form>
```