角度验证无法与HTML验证同步

Question

我遇到了Angular验证问题。

我在parentForm中有一个嵌套的modelGroup。在parentForm中，嵌套modelGroup中使用了一个最大值作为zip字段最大值的指令输入。

Stackblitz中的示例：https://stackblitz.com/edit/91k00-nested-from-validity

预期结果： 更改最大值后，max指令将评估zip字段并使该字段无效，然后modelGroup和parentForm也无效。

实际结果： 更改最大值后，max指令将评估zip字段并使该字段无效，但是modelGroup和parentForm仍然有效。

您能解释一下这种现象并帮助我解决吗？ 谢谢

Answer 1

您不给Angular休息一下。您更改maxValue，并立即进行更新。使用SetTimeout制作新的cicle

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

还有，更改值时需要调用updateValidity函数；

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

和

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

请参阅your forked stackblitz

注意：我不确定，但是使用ReactiveForms可能是最好的方法，并且有可能删除此替代方法