RxWeb

The most powerful and well-factored validation framework for VUE and React based enterprise application.

For More Information on rxweb

Prerequisites

This only works in TypeScript Language Supported Project.

Installation
Form Validation
Contributing
Need Help
Feature Request
License

Installation

$ npm install @rxweb/reactive-forms

Global Configuration

Before applying the validation on the model, you have set few one thing globally. Write the below code at starting point of the application.

// For VUE Projects
ReactiveFormConfig.clientLib = ClientLibrary.Vue;

// For React Projects
ReactiveFormConfig.clientLib = ClientLibrary.React;

Form Validation

Pure model driven decorator based validation.

alpha
alphaNumeric
ascii
compare
contains
creditCard
dataUri
different
digit
email
endsWith
even
extension
factor
greaterThanEqualTo
greaterThan
hexColor
json
latitude
latLong
leapYear
lessThanEqualTo
lessThan
longitude
lowerCase
mac
maxDate
maxLength
maxNumber
minDate
minLength
minNumber
numeric
odd
password
pattern
port
primeNumber
range
required
startsWith
upperCase
url

alpha

Alpha validation will allow only alphabets to be entered. It will not allow any digit or special character.

Model

	@alpha() 
	countryName: string;

Component

        <input id="name" class="form-control" v-model="countryFormGroup.props.countryName" type="text" name="name" />
        <small class="form-text text-danger">{{countryFormGroup.controls.countryName.errorMessage}}<br/></small>

@Component
export default class CountryComponent extends Vue {
 countryFormGroup: IFormGroup<Country>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.countryFormGroup = this.formBuilder.formGroup(Country) as IFormGroup<Country>;
   }
}

alphaNumeric

Alpha Numeric validation will allow only alphabets and numbers to be entered, It will not allow any special character.

Model

	@alphaNumeric() 
	areaName: string;

Component

        <input id="name" class="form-control" v-model="countryFormGroup.props.areaName" type="text" name="name" />
        <small class="form-text text-danger">{{countryFormGroup.controls.areaName.errorMessage}}<br/></small>

@Component
export default class CountryComponent extends Vue {
 countryFormGroup: IFormGroup<Country>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.countryFormGroup = this.formBuilder.formGroup(Country) as IFormGroup<Country>;
   }
}

ascii

ascii validation decorator allows user to enter the input which is in the proper ascii format.

Model

	@ascii() 
	specialCharAsciiCode: string;

Component

        <input id="name" class="form-control" v-model="userFormGroup.props.specialCharAsciiCode" type="text" name="name" />
        <small class="form-text text-danger">{{userFormGroup.controls.specialCharAsciiCode.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

compare

Compare validation will compare two inputs whether they are same or not.

Reactive Form Validation Model

	@prop()
	password: string;

	@compare({fieldName:'password' }) 
	confirmPassword: string;

Component

        <input id="name" class="form-control" v-model="userFormGroup.props.password" type="text" name="name" />
        <small class="form-text text-danger">{{userFormGroup.controls.password.errorMessage}}<br/></small>	
       
        <input id="name" class="form-control" v-model="userFormGroup.props.confirmPassword" type="text" name="name" />
        <small class="form-text text-danger">{{userFormGroup.controls.confirmPassword.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

contains

Contains validation will check that value is in the input, It will not allow to enter input that not contains the predefined value.

Model

	@contains({value:'@gmail.com' }) 
	emailAddress: string;

Component

       <input id="name" class="form-control" v-model="userFormGroup.props.emailAddress" type="text" name="name" />
       <small class="form-text text-danger">{{userFormGroup.controls.emailAddress.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

creditCard

creditCard validation will check property value is creditcardtype or not, It will not allow to enter any value other than credit card format.

Model

	@prop()
 	cardType: string;

	@creditCard({fieldName:'cardType' }) 
	creditCardNumber: string;

Component

       <input id="name" class="form-control" v-model="userFormGroup.props.creditCardNumber" type="text" name="name" />
       <small class="form-text text-danger">{{userFormGroup.controls.creditCardNumber.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

dataUri

dataUri validation allows user to enter the input which is a valid data Uri.

Model

	@dataUri
	videoDataUri: string;

Component

       <input id="name" class="form-control" v-model="userFormGroup.props.emailAddress" type="text" name="name" />
       <small class="form-text text-danger">{{userFormGroup.controls.emailAddress.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

different

different validation decorator will check two inputs whether they are different or not. It is just opposite of different decorator.

Model

	@prop()
	firstName: string;

	@different({fieldName:'firstName' }) 
	lastName: string;

Component

	<input id="name" class="form-control" v-model="accountInfoFormGroup.props.lastName" type="text" name="name" />
	<small class="form-text text-muted">Both field must be different<br/></small>
    <small class="form-text text-danger">{{accountInfoFormGroup.controls.lastName.errorMessage}}<br/></small>

@Component
export default class DifferentAddComponent extends Vue {
 accountInfoFormGroup: IFormGroup<AccountInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.accountInfoFormGroup = this.formBuilder.formGroup(AccountInfo) as IFormGroup<AccountInfo>;
   }
}

digit

Digit validation will allow only digits to be entered, It will not allow any alphabets or special character.

Model

	@digit() 
	age: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.age" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.age.errorMessage}}<br/></small>

@Component
export default class DigitAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

email

email validation decorator will only allow user to enter input which is in the correct email format.

Model

	@email() 
	email: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.email" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.email.errorMessage}}<br/></small>

@Component
export default class EmailAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

endsWith

endsWith validation allows user to enter the input which ends with particular value.

Model

	@endsWith({value:'t' }) 
	name: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.name" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.name.errorMessage}}<br/></small>

@Component
export default class EndsWithAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

even

even validation decorator will check whether the value entered by user is an even number or not.

Model

	@even() 
	evenNumber: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.evenNumber" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.evenNumber.errorMessage}}<br/></small>

@Component
export default class EvenAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

extension

extension validation allows user to enter the input which is in the proper extension format.

Model

	@extension({extensions:['jpg','bmp'] }) 
	profilePicture: string;

Component

	<input id="name" class="form-control" v-model="userInfoFormGroup.props.profilePicture" type="text" name="name" />
    <small class="form-text text-danger">{{userInfoFormGroup.controls.profilePicture.errorMessage}}<br/></small>

@Component
export default class ExtensionAddComponent extends Vue {
 userInfoFormGroup: IFormGroup<UserInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userInfoFormGroup = this.formBuilder.formGroup(UserInfo) as IFormGroup<UserInfo>;
   }
}

extension

extension validation allows user to enter the input which is in the proper extension format.

Model

	@extension({extensions:['jpg','bmp'] }) 
	profilePicture: string;

Component

	<input id="name" class="form-control" v-model="userInfoFormGroup.props.profilePicture" type="text" name="name" />
    <small class="form-text text-danger">{{userInfoFormGroup.controls.profilePicture.errorMessage}}<br/></small>

@Component
export default class ExtensionAddComponent extends Vue {
 userInfoFormGroup: IFormGroup<UserInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userInfoFormGroup = this.formBuilder.formGroup(UserInfo) as IFormGroup<UserInfo>;
   }
}

factor

factor validation will allow user to enter factor of a number which is called dividend.

Model

	@factor({dividend:50 }) 
	firstNumber: Number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.firstNumber" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.firstNumber.errorMessage}}<br/></small>

@Component
export default class FactorAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

greaterThanEqualTo

Greater than equal to validation decorator will check that input property is greater than or equal to the related field input.

Model

	@greaterThanEqualTo({fieldName:'age' }) 
	voterAge: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.voterAge" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.voterAge.errorMessage}}<br/></small>

@Component
export default class GreaterThanEqualToAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

greaterThan

Greater than validation decorator will check that input property is greater than to the related field input.

Model

	@greaterThan({fieldName:'age' }) 
	voterAge: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.voterAge" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.voterAge.errorMessage}}<br/></small>

@Component
export default class GreaterThanAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

hexColor

hexColor validation decorator will allow user to enter only the input in proper Hex Color format.

Model

	@hexColor() 
	color: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.color" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.color.errorMessage}}<br/></small>

@Component
export default class HexColorAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

json

json validation will allow user to enter the input only in proper Json format.

Model

	@json() 
	locationJson: string;

Component

	<input id="name" class="form-control" v-model="jsonInfoFormGroup.props.locationJson" type="text" name="name" />
    <small class="form-text text-danger">{{jsonInfoFormGroup.controls.locationJson.errorMessage}}<br/></small>

@Component
export default class JsonAddComponent extends Vue {
 jsonInfoFormGroup: IFormGroup<JsonInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.jsonInfoFormGroup = this.formBuilder.formGroup(JsonInfo) as IFormGroup<JsonInfo>;
   }
}

latitude

latitude validation allows user to enter value which is valid latitude.

Model

	@latitude() 
	firstCountryLatitude: string;

Component

	<input id="name" class="form-control" v-model="numberInfoFormGroup.props.firstCountryLatitude" type="text" name="name" />
    <small class="form-text text-danger">{{numberInfoFormGroup.controls.firstCountryLatitude.errorMessage}}<br/>              </small>

@Component
export default class LatitudeAddComponent extends Vue {
 numberInfoFormGroup: IFormGroup<NumberInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.numberInfoFormGroup = this.formBuilder.formGroup(NumberInfo) as IFormGroup<NumberInfo>;
   }
}

LeapYear

leapyear validation will check whether the value entered is a leap year or not.

Model

	@leapYear() 
	birthYear: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.birthYear" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.birthYear.errorMessage}}<br/></small>

@Component
export default class LeapYearAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

latLong

latLong validation decorator allows user to enter the input which is valid Latitude or longitude.

Model

	@latLong() 
	firstCountry: string;

Component

	<input id="name" class="form-control" v-model="countryFormGroup.props.firstCountry" type="text" name="name" />
    <small class="form-text text-danger">{{countryFormGroup.controls.firstCountry.errorMessage}}<br/></small>

@Component
export default class LatLongAddComponent extends Vue {
 countryFormGroup: IFormGroup<Country>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.countryFormGroup = this.formBuilder.formGroup(Country) as IFormGroup<Country>;
   }
}

lessThanEqualTo

Less than equal to validation will allow the user to enter only that value which is less than oe equal to the value in the pre defined field.

Model

	@lessThanEqualTo({fieldName:'totalMarks' }) 
	marks: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.marks" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.marks.errorMessage}}<br/></small>

@Component
export default class LessThanEqualToAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

lessThan

less than validation decorator will allow the user to enter only that value which is less than the value in the pre defined field.

Model

	@lessThan({fieldName:'marks' }) 
	passingMarks: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.passingMarks" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.passingMarks.errorMessage}}<br/></small>

@Component
export default class LessThanAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

longitude

longitude validation allows user to enter the input which is in the proper longitude format.

Model

	@longitude() 
	firstCountryLongitude: string;

Component

	<input id="name" class="form-control" v-model="numberInfoFormGroup.props.firstCountryLongitude" type="text" name="name" />
    <small class="form-text text-danger">{{numberInfoFormGroup.controls.firstCountryLongitude.errorMessage}}<br/></small>

@Component
export default class LongitudeAddComponent extends Vue {
 numberInfoFormGroup: IFormGroup<NumberInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.numberInfoFormGroup = this.formBuilder.formGroup(NumberInfo) as IFormGroup<NumberInfo>;
   }
}

lowercase

lowerCase validation will allow user to enter only the lowercase alphabets.

Model

	@lowerCase() 
	username: string;

Component

	<input id="name" class="form-control" v-model="userInfoFormGroup.props.username" type="text" name="name" />
    <small class="form-text text-danger">{{userInfoFormGroup.controls.username.errorMessage}}<br/></small>

@Component
export default class LowerCaseAddComponent extends Vue {
 userInfoFormGroup: IFormGroup<UserInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userInfoFormGroup = this.formBuilder.formGroup(UserInfo) as IFormGroup<UserInfo>;
   }
}

mac

mac validation decorator will check whether the value entered is a valid mac address.

Model

	@mac() 
	systemMacAddress: string;

Component

	<input id="name" class="form-control" v-model="macAddressInfoFormGroup.props.systemMacAddress" type="text" name="name" />
	<small class="form-text text-danger">{{macAddressInfoFormGroup.controls.systemMacAddress.errorMessage}}<br/></small>

@Component
export default class MacAddComponent extends Vue {
 macAddressInfoFormGroup: IFormGroup<MacAddressInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.macAddressInfoFormGroup = this.formBuilder.formGroup(MacAddressInfo) as IFormGroup<MacAddressInfo>;
   }
}

maxDate

maxDate validation decorator will allow user to enter the date less than the maxDate value parameter.

Model

	@maxDate({value:'07/30/2018' }) 
	registrationDate: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.registrationDate" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.registrationDate.errorMessage}}<br/></small>

@Component
export default class MaxDateAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

maxLength

MaxLength validation will allow user to enter the input upto the maximum length value parameter.

Model

	@maxLength({value:10 }) 
	firstName: string;

Component

	<input id="name" class="form-control" v-model="locationFormGroup.props.firstName" type="text" name="name" />
    <small class="form-text text-danger">{{locationFormGroup.controls.firstName.errorMessage}}<br/></small>

@Component
export default class MaxLengthAddComponent extends Vue {
 locationFormGroup: IFormGroup<Location>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.locationFormGroup = this.formBuilder.formGroup(Location) as IFormGroup<Location>;
   }
}

maxLength

MaxLength validation will allow user to enter the input upto the maximum length value parameter.

Model

	@maxLength({value:10 }) 
	firstName: string;

Component

	<input id="name" class="form-control" v-model="locationFormGroup.props.firstName" type="text" name="name" />
    <small class="form-text text-danger">{{locationFormGroup.controls.firstName.errorMessage}}<br/></small>

@Component
export default class MaxLengthAddComponent extends Vue {
 locationFormGroup: IFormGroup<Location>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.locationFormGroup = this.formBuilder.formGroup(Location) as IFormGroup<Location>;
   }
}

maxNumber

MaxNumber validation will allow user to enter the input upto the maximum number value parameter.

Model

	@maxNumber({value:50 }) 
	passingMarks: number;

Component

	<input id="name" class="form-control" v-model="subjectDetailsFormGroup.props.passingMarks" type="text" name="name" />
    <small class="form-text text-danger">{{subjectDetailsFormGroup.controls.passingMarks.errorMessage}}<br/></small>

@Component
export default class MaxNumberAddComponent extends Vue {
 subjectDetailsFormGroup: IFormGroup<SubjectDetails>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.subjectDetailsFormGroup = this.formBuilder.formGroup(SubjectDetails) as IFormGroup<SubjectDetails>;
   }
}

minDate

Minimum Date validation will allow user to enter date greater the minimum date value parameter.

Model

	@minDate({value:'07/30/2018' }) 
	registrationDate: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.registrationDate" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.registrationDate.errorMessage}}<br/></small>

@Component
export default class MinDateAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

minLength

minLength validation decorator will allow user to enter the input length matching the minimum length value parameter.

Model

	@minLength({value:3 }) 
	countryName: string;

Component

	<input id="name" class="form-control" v-model="contactFormGroup.props.countryName" type="text" name="name" />
    <small class="form-text text-danger">{{contactFormGroup.controls.countryName.errorMessage}}<br/></small>

@Component
export default class MinLengthAddComponent extends Vue {
 contactFormGroup: IFormGroup<Contact>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.contactFormGroup = this.formBuilder.formGroup(Contact) as IFormGroup<Contact>;
   }
}

minNumber

minNumber validation decorator will allow user to enter the input greater than the minimum number value parameter.

Model

	@minNumber({value:35 }) 
	maths: number;

Component

	<input id="name" class="form-control" v-model="resultInfoFormGroup.props.maths" type="text" name="name" />
    <small class="form-text text-danger">{{resultInfoFormGroup.controls.maths.errorMessage}}<br/></small>

@Component
export default class MinNumberAddComponent extends Vue {
 resultInfoFormGroup: IFormGroup<ResultInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.resultInfoFormGroup = this.formBuilder.formGroup(ResultInfo) as IFormGroup<ResultInfo>;
   }
}

numeric

numeric validation will check whether the value entered is a valid numberic value or not.The validation can be set according to requirement, it can be either decimal,negative number or positive number.

Model

	@numeric({acceptValue:NumericValueType.PositiveNumber  ,allowDecimal:false }) 
	integerNumber: number;

Component

	<input id="name" class="form-control" v-model="userInfoFormGroup.props.integerNumber" type="text" name="name" />
    <small class="form-text text-danger">{{userInfoFormGroup.controls.integerNumber.errorMessage}}<br/></small>

@Component
export default class NumericAddComponent extends Vue {
 userInfoFormGroup: IFormGroup<UserInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userInfoFormGroup = this.formBuilder.formGroup(UserInfo) as IFormGroup<UserInfo>;
   }
}

odd

Odd validation will check whether the value entered is an odd number or not.

Model

	@odd() 
	oddNumber: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.oddNumber" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.oddNumber.errorMessage}}<br/></small>

@Component
export default class OddAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

pattern

pattern validation decorator will allow user to enter the input which match the predefined pattern value parameter.

Model

	@pattern({expression:{'onlyAlpha': /^[A-Za-z]+$/} }) 
	userName: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.userName" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.userName.errorMessage}}<br/></small>

@Component
export default class PatternAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

password

password validation decorator will allow user to enter only the input according to correct password validation format.

Model

	@password({validation:{maxLength: 10,minLength: 5,digit: true,specialCharacter: true} }) 
	password: string;

Component

	<input id="name" class="form-control" v-model="loginInfoFormGroup.props.password" type="text" name="name" />
    <small class="form-text text-danger">{{loginInfoFormGroup.controls.password.errorMessage}}<br/></small>

@Component
export default class PasswordAddComponent extends Vue {
 loginInfoFormGroup: IFormGroup<LoginInfo>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.loginInfoFormGroup = this.formBuilder.formGroup(LoginInfo) as IFormGroup<LoginInfo>;
   }
}

port

port validation decorator allows user to enter the input which is a valid port number.

Model

	@port() 
	educationalWebsitePort: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.educationalWebsitePort" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.educationalWebsitePort.errorMessage}}<br/></small>

@Component
export default class PortAddComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() {
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

primeNumber

primeNumber validation allows user to enter only prime number.

Model

	@primeNumber 
	firstNumber: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.firstNumber" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.firstNumber.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

range

Model

	@range(minimumNumber:18, maximumNumber:60) 
	age: number;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.age" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.age.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

required

Required validation will check that the user has entered the value in the property or not.

Model

	@required() 
	countryName: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.countryName" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.countryName.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

startsWith

startsWith validation allows user to enter the input which starts with particular value.

Model

	@startsWith('n') 
	countryName: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.countryName" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.countryName.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

upperCase

UpperCase validation will allow user to enter the alphabets only in the upperCase format.

Model

	@upperCase() 
	countryName: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.countryName" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.countryName.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

url

Url validation will check that value entered in the property is in the correct url format or not.

Model

	@url() 
	adminWebsiteUrl: string;

Component

	<input id="name" class="form-control" v-model="userFormGroup.props.adminWebsiteUrl" type="text" name="name" />
    <small class="form-text text-danger">{{userFormGroup.controls.adminWebsiteUrl.errorMessage}}<br/></small>

@Component
export default class UserComponent extends Vue {
 userFormGroup: IFormGroup<User>;

 formBuilder: RxFormBuilder = new RxFormBuilder();

  constructor() 
    super();
    this.userFormGroup = this.formBuilder.formGroup(User) as IFormGroup<User>;
   }
}

Contributing

If you are thinking to make rxweb framework better, that's truly great. You can contribute from a single character to core architectural work or significant documentation all with the goal of making a robust rxweb framework which helps for everyone in their projects. Even if you are dont feel up to writing code or documentation yet, there are a variety of other ways that you can contribute like reporting issues to testing patches.

Check out the docs on how you can put your precious efforts on the rxweb framework and contribute in the respective area.

Need Help

We highly recommend for help please ask your questions on our gitter/rxweb-project to get quick response from us. Otherthan our gitter channel you can ask your question on StackOverflow or create a new issue in our Github Repository.

For, issue please refer our issue workflow wiki for better visibility our issue process.

Feature Request

You can request a new feature by submitting an issue to our GitHub Repository. If you would like to implement a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it.

License

MIT

@rxweb/reactive-forms

RxWeb

Prerequisites

Table of Contents

Installation

Global Configuration

Form Validation

alpha

alphaNumeric

ascii

compare

contains

creditCard

dataUri

different

digit

email

endsWith

even

extension

extension

factor

greaterThanEqualTo

greaterThan

hexColor

json

latitude

LeapYear

latLong

lessThanEqualTo

lessThan

longitude

lowercase

mac

maxDate

maxLength

maxLength

maxNumber

minDate

minLength

minNumber

numeric

odd

pattern

password

port

primeNumber

range

required

startsWith

upperCase

url

Contributing

Need Help

Feature Request

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads