# Usage

1. Import `SchematerModule.forRoot({})` with propper configuration.
1. To display view field use `<schemater-view-field></schemater-view-field>` in template
1. To display input field use `<schemater-input-field></schemater-input-field>` in template
1. To display search field use `<schemater-input-field></schemater-input-field>` in template

## forRoot configuration

- `viewComponents?: SchematerComponentConfig[]` - definition of view types. `component` is `entryComponents` that extends `SchematerViewField` *Example*:
    ```typescript
    [{name: 'text', component: ViewTextComponent}]
    ```
- `inputComponents?: SchematerInputComponentConfig[]` - definition of input types. `component` is `entryComponents` that extends `SchematerInputField` *Example*:
    ```typescript
    [{
        name: 'text', // required
        component: InputTextComponent, // required
        defaultValue: 'default init value', // optional. If not set default init value will be `null`
        validators: { // validators applied to every field of that type. It is of type `SchematerValidators`
            required: {}
        }
    }]
    ```
- `searchComponents?: SchematerComponentConfig[]` - definition of input types. `component` is `entryComponents` that extends `SchematerSearchField` *Example*:
    ```typescript
    [{name: 'text', component: SearchTextComponent}]
    ```
- `inputLayoutComponents?: SchematerComponentConfig[]` - definition of input layouts for `SchematerInputFormComponent`. `component` is `entryComponents` that extends `SchematerInputFormLayout`

- `searchLayoutComponents?: SchematerComponentConfig[]` - definition of input layouts for `SchematerSearchFormComponent`. `component` is `entryComponents` that extends `SchematerSearchFormLayout`

- `validationMessages?: {[s: string]: string;}` - definition of messages for given error's keys. In message You can give values of error's object as pattern `{{errorValueKey}}`
    *Example*:
    ```typescript
    validationMessages: {
        required: 'This field is required',
        minLength: 'Give at least {{requiredLength}} chars',
    }
    ```

- `validators?: SchematerValidators;` - definition of validators used by fields. Look form `Validators` section form more info

## Fields



In `@schemater/core` You define types of fields. Those types are split to three kinds:
- *View* - how data of field is displayed
- *Input* - how data of field is inputed
- *Search* - how to define data of field when You search against it

You define types in `forRoot`

## Validators

In schemater You can use angular built-in, as well as custom async and normal validators. You define them in `forRoot` configuration using `validators` key and `SchematerValidators` interface.

```
export interface SchematerValidators {
  [nameOfValidator: string]: {
    validatorService: SchematerValidator // service that implements `SchematerValidator` interface
    async?: boolean; // is it async?
    message?: string; // what's the default error message. Can be overridden in field config
  };
}
```

*Definition example*:
```typescript
SchematerModule.forRoot({
    // ...
    validators: {
        helloWorld: {
          message: 'It has to be 'Hello world',
          validatorService: HelloWorldValidatorService,
        },
        customMinLength: {
          message: 'Wymagane {{liczba}} elementy',
          validatorService: MyCustomMinLengthValidatorService,
        }
    }
});

export class HelloWroldValidatorService implements SchematerValidator {
    buildValidator(params?:any) {
        return (control: AbstractControl) => {
          const forbidden = control.value && control.value==='Hello World' ? false : true;
          return forbidden ? {'helloWorld': true : null;
        };
    }
}

@Injectable({
  providedIn: 'root'
})
export class MyCustomMinLengthValidatorService implements SchematerValidator {
  constructor(private dummyService: DummyService) {
  }

  buildValidator(params?: any): (c: AbstractControl) => ValidationErrors | null {
    return (c: AbstractControl) => {
      const forbidden = c.value && c.value.length >= params.liczba ? false : true;
      return forbidden ? {'customMinLength': {liczba: params.liczba}} : null;
    };
  }
}
```

Validators are used in `field config` in `validators` param where key is validator name or id and value is an object with two optional keys:
    - `params?: any` - if validator is a function that returns `ValidatorFn` or a `SchematerValidator` then You can pass here params
    - `message?: string` - custom error message for that field. You can use `{{}}` with error value keys to display error's value in message

*Usage example*:

```typescript
const fieldConfig: SchematerFieldConfig = {
  id: 'text',
  inputType: 'text',
  name: 'Normal text',
  validators: {
    required: {
        message: 'Custom error message for that field'
    },
    asyncOne: {},
    requiredLength: {
        params: {liczba: 5},
    },
    helloWorld: {},
  }
},
```

# Built in components

## SchematerViewFieldComponent `<schemater-view-field>`

TODO

## SchematerInputFieldComponent `<schemater-input-field>`

TODO

## SchematerSearchFieldComponent `<schemater-search-field>`

TODO

## SchematerInputFormComponent `<schemater-input-form>`

Component for input form. It presents fields ina a form according to layout.

### Inputs

`formArray: FormGroup` - it's a `FormGroup` of whole form. If You have `form` as a parent element You can omit this imput as in example below. *Example*
```html
<form [formGroup]="formGroup">
    <schemater-input-form></schemater-input-form>
</form>
```

`fields: SchematerFieldConfig[]` - definition of all fields used in form.

```typescript
fields: SchematerFieldConfig[] = [
    {
      id: 'text', // required - id of field and key of `FormControl` in `FormGroup`
      inputType: 'text', // required - type of input
      viewType: 'text', // not required in this component
      searchType: 'text', // not required in this component
      name: 'Text label', // label of field
      inputDescription: 'text', // Description showed in input form
    }
];
```

`initValue: any` - initial value of form. Key is field id and value is it's value.

`displayFields: string[]` - array of fields (it's ids to be precise) that will be displayed in given order in form. If You remove some displayFields dynamically `Schemater` will remove also it's `FormControl` so that validators can correctyl validate whole form.

`hideFields: string[]` - array of field's ids that will be hidden. If You change it `Schemater` won't remove `FormControls`

`options: SchematerInputFormOptions` - options of form
- `defaultLayout?: string` - default layout of fields. If You provide `layout` in `SchematerFieldConfig` it will be overwritten.
- `forceLayout?: string` - forced layout of fields. `layout` param in `SchematerFieldConfig` will be ignored.