Usage

1. Import SchematerModule.forRoot({}) with propper configuration.
2. To display view field use <schemater-view-field></schemater-view-field> in template
3. To display input field use <schemater-input-field></schemater-input-field> in template
4. 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:

  [{name: 'text', component: ViewTextComponent}]

• inputComponents?: SchematerInputComponentConfig[] - definition of input types. component is entryComponents that extends SchematerInputField Example:

  [{
      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:

  [{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:

  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:

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:

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

<form [formGroup]="formGroup">
    <schemater-input-form></schemater-input-form>
</form>

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

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.