页面上有新增和修改两个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。