Javascript 订阅Angular2+;中FormControl的真值更改的最佳方式;?
Javascript 订阅Angular2+;中FormControl的真值更改的最佳方式;?,javascript,angular,rxjs,angular-reactive-forms,rxjs6,Javascript,Angular,Rxjs,Angular Reactive Forms,Rxjs6,valueChangesFormControl对象上存在的Observable每次调用setValue(value)函数时都会发出值 使用RxJS操作符distinctunitrichanged我们可以过滤掉非新值。但如果FormControl具有初始值,则此操作不起作用 const formGroup1 = new FormGroup({page: new FormControl(1)}); const formControl1 = formGroup1.get('page'); formCo
valueChanges
FormControl对象上存在的Observable每次调用setValue(value)
函数时都会发出值
使用RxJS操作符distinctunitrichanged
我们可以过滤掉非新值。但如果FormControl具有初始值,则此操作不起作用
const formGroup1 = new FormGroup({page: new FormControl(1)});
const formControl1 = formGroup1.get('page');
formControl1.valueChanges.pipe(distinctUntilChanged())
.subscribe(v => console.log(`new formControl1 value: ${v}`));
formControl1.setValue(1);
formControl1.setValue(2);
这将被记录下来
> new form1Control value: 1
> new form1Control value: 2
1是第一个值valueChanges
Observable发出,因为formControl1值是在创建valueChanges
Observable之前设置的
distinctUntilChanged
从不过滤第一个发出的值
以下是此问题的一种解决方案:
const formGroup2 = new FormGroup({page: new FormControl(1)});
const formControl2 = formGroup2.get('page');
formControl2.valueChanges.pipe(
startWith(1),
distinctUntilChanged(),
skip(1)
).subscribe(v => console.log(`new formControl2 value: ${v}`));
formControl2.setValue(1);
formControl2.setValue(2);
在这里,我通过发出FormControl初始值来修改可观察的valueChanges
,然后跳过它。因此,第一次调用distinctUntilChanged
时,即第行:
formControl2.setValue(1)
它已经有了previousValue(1)来比较新值,所以subscribe中的函数不会被执行
但我真的不喜欢这个解决方案。Angular7和RxJS6中是否有内置或推荐的方法来处理FormControl值的更改
stackblitz:distinctUntilChanged初始状态始终为空。但当第一个值被发出时,它将改变存储的第一个值。在发出第二个值之后,将比较新值和存储值。因此,您的解决方案是正确的,或者您可以使用skipWhile进行第一次值比较。如果我正确理解了这个问题,您希望您的可观察值仅在初始值以外的任何值更改时触发 创建表单控件时是否尝试过设置值
newformcontrol({value:1})代码>
或者,可以指定在设置值时不希望发出事件
const formControl1=新FormControl(1);
formControl1.setValue(1,{emitEvent:false});
根据单据可以在设置值时指定选项,包括:
emitEvent:如果为true或未提供(默认值),则statusChanges和valueChanges Observable在更新控件值时都会发出具有最新状态和值的事件。如果为false,则不会发出任何事件
我希望这有帮助 在我的示例中,表单控件的初始值为1。我在创建控件后立即调用setValue(1),valueChanges observable发出1,我不希望这样,因为这不是一个新值,它与初始值相同。我想我理解你。我不知道有什么内置的或推荐的方法来处理初始表单值并订阅它们的更改。就我个人而言,当我必须实施这样一种方法时,我最终会选择emitEvent:false方法,但这主要是我个人的偏好。