javascript - FormGroup 值在订阅内设置值后未更新

Question

我有自定义单选列表，每个控件都有不同的控件名称(这些控件是 html 中的复选框)我认为来自这些复选框(输入名称)的列表只能选择一个，我做这样的事情(在 ngOnInit 中) :

formGroup
  .get('ChildGroup')
  .valueChanges.pipe(
    startWith(formGroup.get('ChildGroup').getRawValue()),
    pairwise(),
  )
  .subscribe(([oldState, newState]) => {
    console.log(oldState, newState)
    // List of radio checkboxes
    const radioInputs = [
      'childName1', 'childName2', 'childName3', 'childName4',
    ];
    // Find changed value
    const updatedElementName = radioInputs.find(
      elem => oldState[elem] !== newState[elem],
    );
    // Set true only for input which is changed
    radioInputs.forEach(input => {
      formGroup
        .get('ChildGroup')
        .get(input)
        .setValue(
          updatedElementName === input, { emitEvent: false },
        );
    });
  });

问题很奇怪，因为在单击复选框后，我从日志中收到了这样的数据:

// First click on childName2 (childName1 unchecked) - correct, expected
oldState.childName1 // true
oldState.childName2 // false
newState.childName1 // true
newState.childName2 // true

// Second click on childName1 (childName1 and childName2 unchecked)
oldState.childName1 // true
oldState.childName2 // true
newState.childName1 // true
newState.childName2 // true

第二次单击时的 oldState.childName1 值并非预期的 false，即使我在第一次单击后在 valueChanges 订阅中使用 setValue on false。

Stackblitz 有这个错误:

https://stackblitz.com/edit/angular-q9ppdt

• Angular 7.2
• RxJS 6.3

如果我的描述不清楚，请告诉我。

谢谢!

Answer 1

这可以是一个简单的解决方案，只需订阅每个控件的值更改并翻转另一个控件的值

this.formGroup.get('control1').valueChanges.subscribe(value => {
  this.formGroup.get('control2').setValue(!value, { emitEvent: false })
})

this.formGroup.get('control2').valueChanges.subscribe(value => {
  this.formGroup.get('control1').setValue(!value, { emitEvent: false })
})

demo 🔥🔥

更新了!🌟🌟与上面相同的想法的基础，但作为控件数组的动态订阅基础

如果我有这个控件列表

  radioInputs = [
    'control1', 'control2', 'control3', 'control4', 'control5'
  ];

订阅每个表单控件，每次选中任何一个控件都会重置其他控件

this.radioInputs.forEach(control => {
  this.formGroup.get(control).valueChanges.subscribe(value => {
    if (value) {
      this.resetOthers(control);
    }
  })
});

重置方法

  resetOthers(currentControl) {
    this.radioInputs.filter(control => control !== currentControl).forEach(control => {
      this.formGroup.get(control).setValue(false, { emitEvent: false })
    })
  }

demo 🚀🚀