jQuery UI Widgets Forums Angular Angular 6 jqxDateTimeInput with reactive forms

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 6 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • Tymek
    Participant

    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.


    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.