For More Information on rxweb

Prerequisites

This only works in TypeScript Language Supported Project.

Table of Contents

• 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.

2. alpha
3. alphaNumeric
4. ascii
5. compare
6. contains
7. creditCard
8. dataUri
9. different
10. digit
11. email
12. endsWith
13. even
14. extension
15. factor
16. greaterThanEqualTo
17. greaterThan
18. hexColor
19. json
20. latitude
21. latLong
22. leapYear
23. lessThanEqualTo
24. lessThan
25. longitude
26. lowerCase
27. mac
28. maxDate
29. maxLength
30. maxNumber
31. minDate
32. minLength
33. minNumber
34. numeric
35. odd
36. password
37. pattern
38. port
39. primeNumber
40. range
41. required
42. startsWith
43. upperCase
44. 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 don’t 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