appsapp-module

appsapp-module for Ionicframework

Attention: Don't use it in production environment. It's an alpha version for a concept study.

This is an appsApp collection of high quality ui components with awesome backend and validation services full included. Now you build super sophisticated Angular/Ionic apps using TypeScript. Supports Angular's ngc and Ahead-of-Time compiling.

Circular condition validators are the unique selling points. You gonna love it!

Install

You need mobiscroll. So please obtain a licence (see https://www.mobiscroll.com/) and then run:

$ npm install -g @mobiscroll/cli

Once you have kickstarted your ionic app, you can import appsApp to your application by running:

$ mobiscroll config ionic
$ npm install appsapp-module --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import appsApp module
import { AppsappModule } from 'appsapp-module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppsappModule.initializeApp({
      apiKey: '**firebase-public-api-key**',
      projectId: '**firebase-project-id**'
    }, {
      saved: 'Die Änderungen wurden erfolgreich gespeichert.',
      processing: 'Die Verarbeitung läuft.',
      wait: 'Bitte warten.',
      done: 'Erfolgreich abgeschlossen.',
      submitted: 'Die Daten wurden übermittelt.',
      submittedInBackground: 'Die Daten wurden gespeichert und werden übermittelt, sobald eine Internetverbindung besteht.',
      disconnected: 'Die Verbindung wurde unterbrochen.',
      connected: 'Die Verbindung wurde wiederhergestellt.'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create your first form app

Your component ts ends up with:

import {AppsappModuleProvider, PersistableModel, HasConditions, HasPrecision, HasLabel, IsDateRange, HasDescription} from "appsapp-module";
import {IsInt, Min, Max, IsIn} from "class-validator";

@Component({
  selector: 'page-home',
  template: ´
  <appsapp-input [model]="myModel"></appsapp-input>
  <button ion-button round outline (click)="save()" [disabled]="!myModel.hasChanges()">
    Änderungen speichern
  </button>
  ´
})

export class HomePage {

  myModel: myModel;

  constructor(public navCtrl: NavController, appsappModuleProvider: AppsappModuleProvider) {
    this.myModel = appsappModuleProvider.new(myModel);
  }

  save() {
    this.myModel.save();
  }

}


export class myModel extends PersistableModel {
  @IsInt() @Min(5) @Max(15) @HasDescription('please enter a number') number: number;
  @HasConditions([{property: 'number', value: 7, validator: 'min'}]) @HasLabel('Your text') text: string = 'test';
  @IsDateRange() daterange: object;
}

Congratulation, you have created your first form app with appsApp!

Decorators

Basic validators from npm class-validator

Decorator	Description
Common validation decorators
@IsDefined(value: any)	Checks if value is defined (!== undefined, !== null). This is the only decorator that ignores skipMissingProperties option.
@IsOptional()	Checks if given value is empty (=== null, === undefined) and if so, ignores all the validators on the property.
@Equals(comparison: any)	Checks if value equals ("===") comparison.
@NotEquals(comparison: any)	Checks if value not equal ("!==") comparison.
@IsEmpty()	Checks if given value is empty (=== '', === null, === undefined).
@IsNotEmpty()	Checks if given value is not empty (!== '', !== null, !== undefined).
@IsIn(values: any[])	Checks if value is in a array of allowed values.
@IsNotIn(values: any[])	Checks if value is not in a array of disallowed values.
Type validation decorators
@IsBoolean()	Checks if a value is a boolean.
@IsDate()	Checks if the string is a date.
@IsString()	Checks if the string is a string.
@IsNumber()	Checks if the string is a number.
@IsInt()	Checks if the value is an integer number.
@IsArray()	Checks if the string is an array
@IsEnum(entity: object)	Checks if the value is an valid enum
Number validation decorators
@IsDivisibleBy(num: number)	Checks if the value is a number that's divisible by another.
@IsPositive()	Checks if the value is a positive number.
@IsNegative()	Checks if the value is a negative number.
@Max(max: number)	Checks if the given number is greater than given number.
@Min(min: number)	Checks if the given number is less than given number.
Date validation decorators
@MinDate(date: Date)	Checks if the value is a date that's after the specified date.
@MaxDate(date: Date)	Checks if the value is a date that's before the specified date.
String-type validation decorators
@IsBooleanString()	Checks if a string is a boolean (e.g. is "true" or "false").
@IsDateString()	Checks if a string is a date (e.g. "2017-06-07T14:34:08.700Z" or "2017-06-07T14:34:08.700").
@IsNumberString()	Checks if a string is a number.
String validation decorators
@Contains(seed: string)	Checks if the string contains the seed.
@NotContains(seed: string)	Checks if the string not contains the seed.
@IsAlpha()	Checks if the string contains only letters (a-zA-Z).
@IsAlphanumeric()	Checks if the string contains only letters and numbers.
@IsAscii()	Checks if the string contains ASCII chars only.
@IsBase64()	Checks if a string is base64 encoded.
@IsByteLength(min: number, max?: number)	Checks if the string's length (in bytes) falls in a range.
@IsCreditCard()	Checks if the string is a credit card.
@IsCurrency(options?: IsCurrencyOptions)	Checks if the string is a valid currency amount.
@IsEmail(options?: IsEmailOptions)	Checks if the string is an email.
@IsFQDN(options?: IsFQDNOptions)	Checks if the string is a fully qualified domain name (e.g. domain.com).
@IsFullWidth()	Checks if the string contains any full-width chars.
@IsHalfWidth()	Checks if the string contains any half-width chars.
@IsVariableWidth()	Checks if the string contains a mixture of full and half-width chars.
@IsHexColor()	Checks if the string is a hexadecimal color.
@IsHexadecimal()	Checks if the string is a hexadecimal number.
`@IsIP(version?: "4"	"6")`
`@IsISBN(version?: "10"	"13")`
@IsISIN()	Checks if the string is an ISIN (stock/security identifier).
@IsISO8601()	Checks if the string is a valid ISO 8601 date.
@IsJSON()	Checks if the string is valid JSON.
@IsLowercase()	Checks if the string is lowercase.
@IsMobilePhone(locale: string)	Checks if the string is a mobile phone number.
@IsMongoId()	Checks if the string is a valid hex-encoded representation of a MongoDB ObjectId.
@IsMultibyte()	Checks if the string contains one or more multibyte chars.
@IsNumericString()	Checks if the string is numeric.
@IsSurrogatePair()	Checks if the string contains any surrogate pairs chars.
@IsUrl(options?: IsURLOptions)	Checks if the string is an url.
`@IsUUID(version?: "3"	"4"
@IsUppercase()	Checks if the string is uppercase.
@Length(min: number, max?: number)	Checks if the string's length falls in a range.
@MinLength(min: number)	Checks if the string's length is not less than given number.
@MaxLength(max: number)	Checks if the string's length is not more than given number.
@Matches(pattern: RegExp, modifiers?: string)	Checks if string matches the pattern. Either matches('foo', /foo/i) or matches('foo', 'foo', 'i').
@IsMilitaryTime()	Checks if the string is a valid representation of military time in the format HH:MM.
Array validation decorators
@ArrayContains(values: any[])	Checks if array contains all values from the given array of values.
@ArrayNotContains(values: any[])	Checks if array does not contain any of the given values.
@ArrayNotEmpty()	Checks if given array is not empty.
@ArrayMinSize(min: number)	Checks if array's length is as minimal this number.
@ArrayMaxSize(max: number)	Checks if array's length is as maximal this number.
@ArrayUnique()	Checks if all array's values are unique. Comparison for objects is reference-based.

Special validators from npm appsapp-module

Decorator	Description
General ui decorators
@HasConditions([...])	Show/hide ui for this property by conditions
@HasLabel(label: string)	Set the ui label for this property
@HasDescriptions(description: string)	Adds a short decriptions to the ui for this property
@HasPrecision(precision: number)	Defines precision like number of decimals
@IsBirthDate(precision: number)	Defines precision like number of decimals
Specific ui decorators
@IsBirthDate()	Set special ui for birth dates
@IsCalendar()	Set special ui for a calendar view
@IsDateRange()	Set special ui for a date range view
@IsNumpad()	Set special ui for a num pad view
@IsPassword()	Set special ui password input element
@IsRating(..)	Set special ui for ratings
@IsRating(length: number)	Set special ui long text

License

MIT © Michael Egli