ZPY博客

angularjs里双向绑定的bug及解决方法

页面上有新增和修改两个button,共用一个弹出画面,弹出画面上有文件名和地址两个input,这两个input都做了双向绑定,并且有必须check。点击修改时,会将文件名和地址的值显示出来,然后点关闭后,再点新增,会出现必须check变红出错。

这是因为点修改时,已经给两个Input赋了值,所以点新增时把两个input的值清空后,angular认为从有值变成了空,所以check出错。但是这时我们希望的是点新增初期空白时不出check的错。

这就是双向绑定的一个bug,其实与angular无关,只要是双向绑定,应该就会有这个问题。百度google了半天,都没有查到相关的内容。。想了两天,自己解决了。解决方法如下:

首先,做必须check用的是

this.myForm = this.service.fb.group({
      name: [null, [this.service.validators.required]],
      url: [null, [this.service.validators.required]]
    });

本来是放在在ngOnInit()里,我的思路是既然是在修改时给这两个变量赋了值,那能不能在点修改再点关闭时,把这个check的绑定取消掉?答案是可以的!在点修改再点关闭或者确定时加上下面的代码

this.myForm = this.service.fb.group({
      name: [null, null],
      url: [null, null]
    });

这样一来就取消了check,然后在点击修改和新增的一开始加上check。

this.myForm = this.service.fb.group({
      name: [null, [this.service.validators.required]],
      url: [null, [this.service.validators.required]]
    });

这样就可以保证修改时对变更的更改不会影响到初期的check状态。

恩。。上面经过测试是可行的,后面无意中发现把上面代码的取消check的代码删掉依然是可以的!就是说在修改和新增的一开始重新加上check就可以!好吧,原理并不是很懂,可能是重新加上check时就不会管之前的状态,而是从现在来做check。