如何在Angular 2中订阅两个输入字段并使它们相互切换?

Question

我有一个复选框和输入字段，

情形一:

• 如果输入字段不为空，复选框将被禁用。
• 如果输入字段为空，复选框将被启用。

两个:

• 如果复选框被选中，输入字段将被禁用。
• 如果复选框未被选中，则输入字段将被启用。

这里是angular HTML部分;

<form [formGroup]="testForm">
<div>
<label for="veggieMustard">show Text</label>
<input
formControlName="showTextInput"
id="showText"
type="text"
/>
</div>
<div>
<input
formControlName="showCheckbox"
id="showCheckBox"
type="checkbox"
/>
<label for="showCheckBox">show</label>
</div>
</form>

角控制器:

import { Component, OnInit } from '@angular/core';
import {
FormGroup,
FormBuilder,
FormControl,
} from '@angular/forms';
@Component({
selector: 'order-sheet',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.css'],
})
export class TestController implements OnInit {
testForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.buildForm();
}
ngOnInit() {
this.subscribeToShowTextInput();
this.subscribeToShowCheckBox();
}
buildForm(): void {
this.testForm = this.formBuilder.group(
{
showTextInput: this.formBuilder.control(null),
showCheckbox: this.formBuilder.control(null),
}
// To Disable or Enable the Checkbox depeneds on the input field status
private subscribeToShowTextInput(): void {
const showCheckbox = this.orderSheetForm.controls['showCheckbox'];
this.orderSheetForm.controls['showTextInput'].valueChanges.subscribe(
(value) => {
if (value) {
showCheckbox.disable();
} else {
showCheckbox.enable();
}
console.log(value);
}
);
}
// To Disable or Enable the Input field depeneds on the Checkbox status
private subscribeToShowCheckBox(): void {
const showTextInput = this.orderSheetForm.controls['showTextInput'];
this.orderSheetForm.controls['showCheckbox'].valueChanges.subscribe(
(value) => {
if (value) {
showTextInput.setValue('');
showTextInput.disable();
} else {
showTextInput.enable();
}
console.log(value);
}
);
}}

我得到这个错误Error RangeError:最大调用堆栈大小超过这是因为订阅总是相互更新这让我进入了无限循环，如果我禁用其中一个订阅它会正常工作，

谁有什么好主意来处理这种情况?

我很感激任何建议，指向文档或文章，因为我花了几天的时间搜索，但我没有找到任何有用的东西对我的情况。

提前谢谢你。

Answer 1

在禁用和启用控件时应该传入emitEvent: false选项。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
@Component({
selector: 'form',
templateUrl: 'form.component.html',
styles: [],
})
export class FormComponent {
form = this.fb.group({
showCheckbox: new FormControl(),
showTextInput: new FormControl(),
});
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.subscribeToShowTextInput();
this.subscribeToShowCheckBox();
}
private subscribeToShowTextInput(): void {
this.showTextInput.valueChanges.subscribe((value) => {
if (value) {
this.showCheckbox.disable({ emitEvent: false });
} else {
this.showCheckbox.enable({ emitEvent: false });
}
});
}
private subscribeToShowCheckBox(): void {
this.showCheckbox.valueChanges.subscribe((value) => {
if (value) {
this.showTextInput.setValue('');
this.showTextInput.disable({ emitEvent: false });
} else {
this.showTextInput.enable({ emitEvent: false });
}
});
}
get showCheckbox() {
return this.form.get('showCheckbox');
}
get showTextInput() {
return this.form.get('showTextInput');
}
}