[英]Angular7 Detect change of input value in reactive forms
我第一次在 Angular(v7) 中使用反应形式
如果任何字段发生更改,我想启用我的提交按钮。 所以我正在处理表单的dirty
值。 对于一个简单的场景,它的工作原理。 我更改了输入类型文本,按钮变为启用。
但是现在我遇到了一个元素( <span id="locationUpdated">
)的问题,其中的值正在被其他一些 javascript 函数的结果更改。
所以我决定监听一个hidden
输入的变化,它以与span
元素相同的方式获取值
<form [formGroup]="model.form" >
....
<input id="nameInput" type="text"
[(ngModel)]="model.user.name"
formControlName="name" />
...
<span [textContent]="model.user.location.label" id="locationUpdated"></span>
<input type="hidden" [value]="model.user.location.label" formControlName="location" />
....
<button [ngClass]="{'disabled': !model.form.dirty}></button>
</form>
- - 成分 - -
private buildFormUpdated() {
this.model.form = this.formBuilder.group({
name: [this.model.user.name, [Validators.required]],
location: [this.model.user.location.label]
});
}
我将hidden
替换为text
以便我可以看到值的变化并且它工作正常。
然而, dirty
属性仍然是false
。 如果我手动更改,我会dirty:true
我错过了什么? 谢谢
我错过了什么?
以编程方式更改数据时,脏标志未设置为 true。 仅当用户模糊控件组件或更改值(通过 UI)时才设置为 true
请参考官方文档 - https://angular.io/guide/form-validation#why-check-dirty-and-touched
您可以通过在逻辑 this.model.form.markAsDirty(); 之后执行此操作来显式地将控件标记为脏控件;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.