Validation not working properly

2 posts, 0 answers
  1. WenatexIT
    WenatexIT avatar
    14 posts
    Member since:
    Nov 2015

    Posted 15 Apr 2019 Link to this post

    Hello

    I have an option list, and depending on the selection one of two ComboBoxes should be required

    But the required state only gets active, after I select a value in the ComboBox which is meant to be required - when I then delete the entry again, it displays as error and the form gets invalid, but not directly after setting it via code and updating value&validitiy

     

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <label for="lastname">{{'BORN_IN' | translate}}</label>
        <div [ngClass]="{'w-error': formGroup.get('BirthDomestic').invalid }">
            <label class="i-check-label w-marging-offset-bottom">
                <input type="radio"
                       name="BirthDomestic"
                       formControlName="BirthDomestic"
                       (change)="onBirthDomesticChange($event)"
                       [value]="1"
                       cubidoICheck />
                {{ 'ITALY' | translate }}
            </label>
        </div>
        <div [ngClass]="{'w-error': formGroup.get('BirthDomestic').invalid }">
            <label class="i-check-label w-marging-offset-bottom">
                <input type="radio"
                       name="BirthDomestic"
                       formControlName="BirthDomestic"
                       (change)="onBirthDomesticChange($event)"
                       [value]="0"
                       cubidoICheck />
                {{ 'ABROAD' | translate }}
            </label>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <label>{{'BIRTHPLACE' | translate}}</label>
        <div class="k-widget-override" [ngClass]="{'w-error': formGroup.get('BirthRegionId').invalid }">
            <kendo-combobox [data]="regionCodes.RegionCodes"
                            [placeholder]="'SELECT_REGION' | translate"
                            [valuePrimitive]="true"
                            [valueField]="'Id'"
                            [textField]="'FilterName'"
                            formControlName="BirthRegionId"
                            [clearButton]="false"
                            [filterable]="true"
                            (filterChange)="regionCodeFilterChanged($event)">
                <kendo-combobox-messages noDataText="{{ 'NO_DATA_FOUND_TWO_CHARS' | translate }}">
                </kendo-combobox-messages>
            </kendo-combobox>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <label>{{'BIRTHPLACE' | translate}}</label>
        <div class="k-widget-override" [ngClass]="{'w-error': formGroup.get('BirthCountryId').invalid }">
            <kendo-combobox [data]="countryCodes.CountryCodes"
                            [placeholder]="'SELECT_COUNTRY_2' | translate"
                            [valuePrimitive]="true"
                            [valueField]="'Id'"
                            [textField]="'FilterName'"
                            formControlName="BirthCountryId"
                            [clearButton]="false"
                            [filterable]="true"
                            (filterChange)="countryCodeFilterChanged($event)">
                <kendo-combobox-messages noDataText="{{ 'NO_DATA_FOUND_TWO_CHARS' | translate }}">
                </kendo-combobox-messages>
            </kendo-combobox>
        </div>
    </div>

     

    public onBirthDomesticChange(): void
    {
        if (this.formGroup.controls["BirthDomestic"].value === 1)
        {
            this.formGroup.controls["BirthRegionId"].setValidators(Validators.required);
            this.formGroup.controls["BirthCountryId"].setValidators(Validators.nullValidator);
        }
        else
        {
            this.formGroup.controls["BirthRegionId"].setValidators(Validators.nullValidator);
            this.formGroup.controls["BirthCountryId"].setValidators(Validators.required);
        }
        this.formGroup.updateValueAndValidity();
    }

     

    Best regards

    Jürgen


  2. Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 17 Apr 2019 Link to this post

    Hi Jürgen,

    Thank you for the demonstrated sample code.

    Check the following example where I reproduced the reported behavior for a ComboBox and a default input element:
    https://stackblitz.com/edit/angular-rluz1m?file=app%2Fapp.component.ts

    When manually changing the state of a form control, their latest state is not updated unless the value of the form control is changed. This is the default Angular functionality. One way, to avoid this is if the form is re-rendered when its form controls are programmatically changed as demonstrated in the following example:
    https://stackblitz.com/edit/angular-rluz1m-nvxwsm?file=app/app.component.ts

    I hope this helps. Let me know in case further assistance is required for this case.

    Regards,
    Svetlin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top