This is a migrated thread and some comments may be shown as answers.
Validation not working properly
1 Answer 55 Views
This is a migrated thread and some comments may be shown as answers.
WenatexIT
Top achievements
Rank 1
WenatexIT asked on 15 Apr 2019, 02:20 PM

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


1 Answer, 1 is accepted

Sort by
0
Svetlin
Telerik team
answered on 17 Apr 2019, 10:09 AM
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.
Asked by
WenatexIT
Top achievements
Rank 1
Answers by
Svetlin
Telerik team
Share this question
or