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

`

`

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 {
formGroup = new FormGroup>({
country: new FormControl(''),
city: new FormControl(''),
zipCode: new FormControl(''),
street: new FormControl(''),
streetNumber: new FormControl('')
});
}
`

address-form.component.html

`

`

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>({
address: new FormControl(null),
...
});
}
`

form.component.html

`

``