jQuery UI Widgets › Forums › Angular › Angular 6 jqxDateTimeInput with reactive forms
Tagged: #datetimeinput, #jqxdatetimeinput, Angular datetimeinput, reactive forms, typescript datetimeinput
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 6 years, 5 months ago.
-
Author
-
Hi,
Is there a way to bind jqxDateTimeInput to reactive form? I tried:
<jqxDateTimeInput formControlName=”date”></jqxDateTimeInput>and in typescript code:
this.dialogForm = new FormGroup({
main: new FormGroup({
date: new FormControl(new Date(), Validators.required),
…It throws error:
Error: There is no FormControl instance attached to form control element with path: ‘main -> date’If I use <input type=”date”/> instead, it works correctly.
Hello Tymek,
Yes, it is possible.
Please, take a look at this example:
app.component.html:<div class="container"> <div class="form-horizontal col-md-4 col-md-offset-4"> <div style="text-align: center"> <h2>User Registration Form</h2> <br> </div> <form [formGroup]="myForm" novalidate> <div class="form-group"> <label class="center-block"> Email: <jqxInput class="form-control" formControlName="email"></jqxInput> </label> <div *ngIf="errMsgs.email.length" class="alert alert-danger"> <ul> <li *ngFor="let error of errMsgs.email"> {{error}} </li> </ul> </div> </div> <div class="form-group"> <label class="center-block"> Username: <jqxInput class="form-control" formControlName="username"></jqxInput> </label> <div *ngIf="errMsgs.username.length" class="alert alert-danger"> <ul> <li *ngFor="let error of errMsgs.username"> {{error}} </li> </ul> </div> </div> <div class="form-group"> <label class="center-block"> DateTime: <jqxDateTimeInput class="form-control" formControlName="datetime" [height]="'16px'"></jqxDateTimeInput> </label> <div *ngIf="errMsgs.datetime.length" class="alert alert-danger"> <ul> <li *ngFor="let error of errMsgs.datetime"> {{error}} </li> </ul> </div> </div> <div class="form-group"> <jqxCheckBox formControlName="terms" [boxSize]="'16px'" [theme]="'metro'"> By checking this box, I agree to Terms & Conditions. </jqxCheckBox> </div> <jqxButton class="btn btn-success" [disabled]="!myForm.valid" (onClick)="register()">Register</jqxButton> <jqxButton style="margin-left: 9px" class="btn btn-default" (onClick)="clearForm()"> Clear Form</jqxButton> </form> </div> </div>
app.component.ts:
import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators, ValidatorFn, AbstractControl } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { myForm: FormGroup; constructor(private fb: FormBuilder) { this.createForm(); this.myForm.valueChanges .subscribe(data => this.checkFormValidity(data)); } createForm(): void { this.myForm = this.fb.group({ email: ['', [Validators.required, Validators.email]], username: ['', [ Validators.required, Validators.minLength(6), Validators.maxLength(12), this.checkForSpecialOrDigit(/((@|!|#|\$|%|\^|&|\*|\(|\)|_|\+|\-|=)|[0-9])/), this.checkForCapitalLetter(/[A-Z]/), this.checkForLowerCaseLetter(/[a-z]/) ]], terms: ['', Validators.requiredTrue], datetime: [null, [ Validators.required, this.checkDate() ] ] }); } checkDate() { return (control: AbstractControl): { [key: string]: any } => { let value = control.value; let year; let month; let day; if (value) { let dateArray = value.split('/'); day = +dateArray[0]; month = +dateArray[1] - 1; year = +dateArray[2]; } let date = new Date(year, month, day); const min = new Date(2016, 0, 1); const max = new Date(2018, 11, 31); const no = min.getTime() < date.getTime() || date.getTime() < max.getTime(); return no ? null : { datetimeRange: false }; } } checkForSpecialOrDigit(regex: RegExp): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { const name = control.value; const no = regex.test(name); return no ? null : { specialOrDigit: false } }; } checkForCapitalLetter(regex: RegExp): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { const name = control.value; const no = regex.test(name); return no ? null : { capital: false } }; } checkForLowerCaseLetter(regex: RegExp): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { const name = control.value; const no = regex.test(name); return no ? null : { lowercase: false } }; } errMsgs: any = { email: [], username: [], datetime: [] } translations: any = { email: { required: 'The email is required.', email: 'This is not a valid email.', minlength: 'The length must be atleast 6 symbols', specialOrDigit: 'Username should contain one number OR special character: !@#$%^&*()_+-=', }, username: { required: 'The username is required.', minlength: 'The length must be atleast 6 symbols', maxlength: 'The length must not exceed 12 symbols', specialOrDigit: 'Username should contain one number OR special character: !@#$%^&*()_+-=', capital: 'Username should have one capital letter', lowercase: 'Username should have one lower case letter', }, datetime: { required: 'The datetime is required.', datetimeRange: 'The date should be between 01/01/2016 and 31/12/2018.' } } checkFormValidity(data?: any): void { for (let k in this.errMsgs) { this.errMsgs[k] = []; if (this.myForm.controls[k].errors && this.myForm.controls[k].dirty) { for (let e in this.myForm.controls[k].errors) { if (this.translations[k][e]) { this.errMsgs[k].push(this.translations[k][e]); } } } } } clearForm(): void { this.myForm.reset() } register(): void { alert('Registration Done!'); } }
It is based on this tutorial:
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-reactive-forms/index.htm?search=Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.