Angular validation not sync with HTML validation

Question

I got an issue with Angular validation.

I have a nested modelGroup in a parentForm. In the parentForm there is a max value used in the nested modelGroup as a directive input for maximum value of the zip field.

Example in Stackblitz: https://stackblitz.com/edit/91k00-nested-from-validity

Expected result: Once you change the max value, the max directive evaluate the zip field and invalidate the field, then the modelGroup and the parentForm are invalid too.

Actual result: Once you change the max value, the max directive evaluate the zip field and invalidate the field but the modelGroup and parentForm are still valid.

Could you explain me this behaviour and help me to fix it ? Thanks

perhaps you could manually set the myForm.valid prop to false in this case. — bob.mazzo
– bob.mazzo, Commented Jun 13, 2019 at 16:28

Eliseo · Accepted Answer · 2019-06-13 16:59:33Z

1

You do not give Angular a break. You change the maxValue, and inmediatly make the update. Use a SetTimeout to make a new cicle

  updateValidity() {
    setTimeout(()=>{
      this.parentForm.controls.address.controls["zip"].updateValueAndValidity();
    })
  }

Futhermore, you need call to function updateValidity when you change the value;

setTo899 () {
    this.maxZipValue = 899;
    this.updateValidity()
  }

And

<input type="number" name="maxZipValue" 
     [ngModel]="maxZipValue" 
     (ngModelChange)="maxZipValue=$event;updateValidity()">

see your forked stackblitz

NOTE: I don't be sure, but using ReactiveForms can be work best and it's possible remove this work-around

answered Jun 13, 2019 at 16:59

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

91K00 Over a year ago

Thanks for your help, I should start thinking about migrating to Reacive Forms...

Collectives™ on Stack Overflow

Angular validation not sync with HTML validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related