Validation not working properly

[WenatexIT]

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

[Svet]

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