只有一个 formcontrolname 应该 value.Make 所有其他为空

Question

我有一个场景，我有 2 个输入字段 name1，name2.I 想要捕获名称。但是如果user enter name1,那么name2应该是empty.If user enter name2,让name1empty.Always最新的有值，另外一个应该为空。

 ngOnInit(): void {
  this.form = this.fb.group({
    inputName: ['', []],
    pickerName: ['', []],
    });

 this.handleValueChange()
  }

handleValueChange() {
 this.form.controls['inputName'].valueChanges.subscribe((value) => {
  this.form.controls['pickerName'].reset()
  });

  this.form.controls['pickerName'].valueChanges.subscribe((value) => {
  this.form.controls['inputName'].reset() 
  }); 

}

这是我试过的，但它会生成一个循环并让 error.How 正确处理这个问题？

Answer 1

FormControl.reset 方法接受带有 emitEvent: boolean 属性的选项对象，您可以设置它以避免输入以编程方式相互触发。

参见：https://angular.io/api/forms/FormControl#reset

handleValueChange() {
 this.form.controls['inputName'].valueChanges.subscribe((value) => {
  this.form.controls['pickerName'].reset('', {emitEvent: false})
  });

  this.form.controls['pickerName'].valueChanges.subscribe((value) => {
  this.form.controls['inputName'].reset('', {emitEvent: false}) 
  }); 
}

只有一个 formcontrolname 应该 value.Make 所有其他为空

Only one formcontrolname should have value.Make all others empty

angular

angular-reactive-forms