feat: forms

projects/ion/src/lib/alert/alert.component.ts

@@ -22,6 +22,21 @@ export class IonAlertComponent implements OnInit {
 
   @ViewChild('ionAlert', { static: false }) private ionAlert: ElementRef;
 
+  // public formConfig = {
+  //   fields: [
+  //     new TextField({
+  //       key: 'nome',
+  //       label: 'Nome',
+  //       required: true,
+  //       placeholder: 'Digite um nome',
+  //       // icon: 'check',
+  //     }),
+  //   ],
+  //   model: {
+  //     select: [1, 4, 1230],
+  //   },
+  // };
+
   iconType: IconType;
 
   closeEvent(): void {

projects/ion/src/lib/core/types/input-area.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '@angular/core';
 
 export interface IonInputAreaProps {
+  key?: string;
   cols?: string;
   rows?: string;
   disabled?: boolean;

projects/ion/src/lib/core/types/input.ts

@@ -5,6 +5,7 @@ import { IconDirection } from './icon';
 export type InputType = 'text' | 'password';
 
 export interface IonInputProps {
+  key?: string;
   placeholder?: string;
   button?: string;
   iconInput?: string;

projects/ion/src/lib/form/core/baseField.ts

@@ -0,0 +1,61 @@
+import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';
+
+export interface IFormField {
+  disabled?: boolean;
+  show?: boolean;
+  size?: number;
+  required?: boolean;
+  validators?: ValidatorFn[];
+}
+
+export abstract class FormField {
+  show: boolean;
+  size: number;
+  type: string;
+  required: boolean;
+  private _key: string;
+  private formControl: AbstractControl;
+
+  constructor(
+    private disabled = false,
+    show = true,
+    size = 4,
+    required = false,
+    private readonly validators = []
+  ) {
+    this.show = show;
+    this.size = size;
+    this.required = required;
+  }
+
+  setFormControl(control: AbstractControl): void {
+    this.formControl = control;
+  }
+
+  setDisable(value: boolean): void {
+    this.disabled = value;
+    value && this.formControl
+      ? this.formControl.disable()
+      : this.formControl.enable();
+    this.formControl.updateValueAndValidity();
+  }
+
+  set key(key: string) {
+    this._key = key;
+  }
+
+  get key(): string {
+    return this._key;
+  }
+
+  getDisabled(): boolean {
+    return this.disabled;
+  }
+
+  getValidators(): ValidatorFn[] {
+    if (this.required) {
+      this.validators.push(Validators.required);
+    }
+    return this.validators;
+  }
+}

projects/ion/src/lib/form/core/switchField.spec.ts

@@ -0,0 +1,44 @@
+import { FormControl, Validators } from '@angular/forms';
+import { ISwitchField, SwitchField } from './switchField';
+
+const fields: ISwitchField = {
+  label: 'Teste',
+};
+
+describe('TextAreaField', () => {
+  let switchField: SwitchField;
+  const formControl = new FormControl(false);
+
+  beforeAll(() => {
+    switchField = new SwitchField({ ...fields });
+    switchField.setFormControl(formControl);
+  });
+
+  it('should instantiate a switch field', () => {
+    expect(switchField).toBeInstanceOf(SwitchField);
+  });
+  it('should set a key on field', () => {
+    switchField.key = 'test';
+    expect(switchField.key).toBe('test');
+  });
+  it('should have type switch', () => {
+    expect(switchField.type).toBe('switch');
+  });
+  it('should disable field', () => {
+    switchField.setDisable(true);
+    expect(switchField.getDisabled()).toBeTruthy();
+    expect(formControl.disabled).toBeTruthy();
+  });
+  it('should enable field', () => {
+    switchField.setDisable(false);
+    expect(switchField.getDisabled()).toBeFalsy();
+    expect(formControl.enabled).toBeTruthy();
+  });
+  it('should have required validator', () => {
+    expect(switchField.getValidators()).not.toContain(Validators.required);
+  });
+  it('should not have required validator', () => {
+    switchField = new SwitchField({ ...fields, required: true });
+    expect(switchField.getValidators()).toContain(Validators.required);
+  });
+});

projects/ion/src/lib/form/core/switchField.ts

@@ -0,0 +1,21 @@
+import { FormField, IFormField } from './baseField';
+
+export interface ISwitchField extends IFormField {
+  label: string;
+}
+
+export class SwitchField extends FormField {
+  label = '';
+  type = 'switch';
+
+  constructor({ label, ...props }: ISwitchField) {
+    super(
+      props.disabled,
+      props.show,
+      props.size,
+      props.required,
+      props.validators
+    );
+    this.label = label;
+  }
+}

projects/ion/src/lib/form/core/textAreaField.spec.ts

@@ -0,0 +1,46 @@
+import { FormControl, Validators } from '@angular/forms';
+import { ITextAreaField, TextAreaField } from './textAreaField';
+import { TextField } from './textField';
+
+const fields: ITextAreaField = {
+  label: 'Teste',
+  placeholder: 'Teste',
+};
+
+describe('TextAreaField', () => {
+  let textAreaField: TextAreaField;
+  const formControl = new FormControl('');
+
+  beforeAll(() => {
+    textAreaField = new TextAreaField({ ...fields });
+    textAreaField.setFormControl(formControl);
+  });
+
+  it('should instantiate a text field', () => {
+    expect(textAreaField).toBeInstanceOf(TextAreaField);
+  });
+  it('should set a key on field', () => {
+    textAreaField.key = 'test';
+    expect(textAreaField.key).toBe('test');
+  });
+  it('should have type text', () => {
+    expect(textAreaField.type).toBe('textarea');
+  });
+  it('should disable field', () => {
+    textAreaField.setDisable(true);
+    expect(textAreaField.getDisabled()).toBeTruthy();
+    expect(formControl.disabled).toBeTruthy();
+  });
+  it('should enable field', () => {
+    textAreaField.setDisable(false);
+    expect(textAreaField.getDisabled()).toBeFalsy();
+    expect(formControl.enabled).toBeTruthy();
+  });
+  it('should have required validator', () => {
+    expect(textAreaField.getValidators()).not.toContain(Validators.required);
+  });
+  it('should not have required validator', () => {
+    textAreaField = new TextField({ ...fields, required: true });
+    expect(textAreaField.getValidators()).toContain(Validators.required);
+  });
+});

projects/ion/src/lib/form/core/textAreaField.ts

@@ -0,0 +1,26 @@
+import { FormField, IFormField } from './baseField';
+
+export interface ITextAreaField extends IFormField {
+  label: string;
+  placeholder: string;
+  cols?: string;
+  rows?: string;
+}
+
+export class TextAreaField extends FormField {
+  label = '';
+  placeholder: string;
+  type = 'textarea';
+
+  constructor({ placeholder, label, ...props }: ITextAreaField) {
+    super(
+      props.disabled,
+      props.show,
+      props.size,
+      props.required,
+      props.validators
+    );
+    this.label = label;
+    this.placeholder = placeholder;
+  }
+}

projects/ion/src/lib/form/core/textField.spec.ts

@@ -0,0 +1,45 @@
+import { FormControl, Validators } from '@angular/forms';
+import { ITextField, TextField } from './textField';
+
+const fields: ITextField = {
+  label: 'Teste',
+  placeholder: 'Teste',
+};
+
+describe('TextField', () => {
+  let textField: TextField;
+  const formControl = new FormControl('');
+
+  beforeAll(() => {
+    textField = new TextField({ ...fields });
+    textField.setFormControl(formControl);
+  });
+
+  it('should instantiate a text field', () => {
+    expect(textField).toBeInstanceOf(TextField);
+  });
+  it('should set a key on field', () => {
+    textField.key = 'test';
+    expect(textField.key).toBe('test');
+  });
+  it('should have type text', () => {
+    expect(textField.type).toBe('text');
+  });
+  it('should disable field', () => {
+    textField.setDisable(true);
+    expect(textField.getDisabled()).toBeTruthy();
+    expect(formControl.disabled).toBeTruthy();
+  });
+  it('should enable field', () => {
+    textField.setDisable(false);
+    expect(textField.getDisabled()).toBeFalsy();
+    expect(formControl.enabled).toBeTruthy();
+  });
+  it('should have required validator', () => {
+    expect(textField.getValidators()).not.toContain(Validators.required);
+  });
+  it('should not have required validator', () => {
+    textField = new TextField({ ...fields, required: true });
+    expect(textField.getValidators()).toContain(Validators.required);
+  });
+});

projects/ion/src/lib/form/core/textField.ts

@@ -0,0 +1,27 @@
+import { FormField, IFormField } from './baseField';
+
+export interface ITextField extends IFormField {
+  label: string;
+  placeholder: string;
+  icon?: string;
+}
+
+export class TextField extends FormField {
+  label = '';
+  placeholder: string;
+  icon: string;
+  type = 'text';
+
+  constructor({ placeholder, icon, label, ...props }: ITextField) {
+    super(
+      props.disabled,
+      props.show,
+      props.size,
+      props.required,
+      props.validators
+    );
+    this.label = label;
+    this.placeholder = placeholder;
+    this.icon = icon;
+  }
+}

projects/ion/src/lib/form/form.component.html

@@ -0,0 +1,74 @@
+<h1>Formulário</h1>
+<form [formGroup]="formGroup" name="form">
+  <ng-container *ngFor="let field of formFields">
+    <ng-container [ngSwitch]="field.type">
+      <!-- InputText -->
+      <ng-container *ngSwitchCase="'text'">
+        <div *ngIf="formGroup.controls[field.key]">
+          <label [for]="field.key">
+            {{ field.label }}
+          </label>
+          <ion-input
+            [key]="field.key"
+            [placeholder]="field.placeholder"
+            [iconInput]="field.icon"
+            [formControlName]="field.key"
+            [invalid]="
+              formGroup.controls[field.key]?.invalid &&
+              (formGroup.controls[field.key]?.dirty ||
+                formGroup.controls[field.key]?.touched)
+            "
+          ></ion-input>
+        </div>
+      </ng-container>
+      <!-- TextArea -->
+      <ng-container *ngSwitchCase="'textarea'">
+        <div *ngIf="formGroup.controls[field.key]">
+          <label [for]="field.key">
+            {{ field.label }}
+          </label>
+          <ion-input-area
+            [key]="field.key"
+            [placeholder]="field.placeholder"
+            [formControlName]="field.key"
+          ></ion-input-area>
+        </div>
+      </ng-container>
+      <!-- SwitchField -->
+      <ng-container *ngSwitchCase="'switch'">
+        <div *ngIf="formGroup.controls[field.key]">
+          <label [for]="field.key">
+            {{ field.label }}
+          </label>
+          <ion-switch
+            [key]="field.key"
+            [formControlName]="field.key"
+          ></ion-switch>
+        </div>
+      </ng-container>
+    </ng-container>
+
+    <div
+      *ngIf="
+        formGroup.controls[field.key]?.invalid &&
+        (formGroup.controls[field.key]?.dirty ||
+          formGroup.controls[field.key]?.touched)
+      "
+    >
+      <span *ngIf="formGroup.controls[field.key]?.errors?.required">
+        Campo obrigatório!
+      </span>
+      <span *ngIf="formGroup.controls[field.key]?.errors?.email">
+        E-mail inválido.
+      </span>
+      <span *ngIf="formGroup.controls[field.key]?.errors?.minlength">
+        Pequeno demais (tamanho mínimo:
+        {{ formGroup.controls[field.key]?.errors?.minlength.requiredLength }})
+      </span>
+    </div>
+
+    <span>Value: {{ formGroup.controls[field.key]?.value }} | </span>
+    <span>Valid: {{ formGroup.controls[field.key]?.valid }} | </span>
+    <span>Disabled: {{ formGroup.controls[field.key]?.disabled }}</span>
+  </ng-container>
+</form>