[英]How can I subscribe to two input fields and make them toggle each other in Angular 2?
I have a checkbox and input field,我有一个复选框和输入字段,
Case One :案例一:
Case Two :案例二:
here is angular html part;这是有角度的 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>
Angular Controller:角度控制器:
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); } ); }}
I am getting this Error ERROR RangeError: Maximum call stack size exceeded Which happened because the subscription is always updating each other which gets me into infinite loop, if i disable one of the subscription it works fine,我收到此错误ERROR RangeError: Maximum call stack size exceeded发生这种情况是因为订阅总是相互更新,这让我进入无限循环,如果我禁用其中一个订阅,它工作正常,
Do anyone have any good idea to deal with such situation ?有没有人有任何好主意来处理这种情况?
I'm appreciating any suggestions, directing to documentations or article, because i spend days searching, but i did not find something useful to my situation.我很欣赏任何建议,指向文档或文章,因为我花了几天时间搜索,但我没有找到对我的情况有用的东西。
Thank you in advance.先感谢您。
You should pass in the emitEvent: false
option when disabling and enabling the controls.在禁用和启用控件时,您应该传入
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');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.