@ngil/form-cva 0.1.0 → 1.1.1

package/README.md

@@ -1,7 +1,143 @@
-# ngil-ui-common-form-cva
+# @ngil/form-cva
 
-This library was generated with [Nx](https://nx.dev).
+The @ngil/form-cva provides facilities to create FormControl, FormGroup control value accessors.
+It was created to be used by presentational components.
 
-## Running unit tests
+## Installation
 
-Run `nx test ngil-ui-common-form-cva` to execute the unit tests.
+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>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngil/form-cva",
-  "version": "0.1.0",
+  "version": "1.1.1",
   "dependencies": {
     "tslib": "^2.3.0"
   },
@@ -10,6 +10,19 @@
     "directory": "/libs/ngil/ui/common/cva"
   },
   "homepage": "https://github.com/allanartuso/ngdux/tree/master/libs/ngil/ui/common/cva#readme",
+  "default": {
+    "name": "@ngil/form-cva",
+    "version": "0.1.0",
+    "dependencies": {
+      "tslib": "^2.3.0"
+    },
+    "repository": {
+      "type": "git",
+      "url": "git@github.com:allanartuso/ngdux.git",
+      "directory": "/libs/ngil/ui/common/cva"
+    },
+    "homepage": "https://github.com/allanartuso/ngdux/tree/master/libs/ngil/ui/common/cva#readme"
+  },
   "module": "fesm2015/ngil-form-cva.mjs",
   "es2020": "fesm2020/ngil-form-cva.mjs",
   "esm2020": "esm2020/ngil-form-cva.mjs",