如何訂閱兩個輸入欄位并使它們在Angular2中相互切換？

我有一個復選框和輸入欄位，

案例一：

• 如果輸入欄位不為空，復選框將被禁用。
• 如果輸入欄位為空復選框將被啟用。

案例二：

• 如果復選框被選中，輸入欄位將被禁用。
• 如果未選中該復選框，則將啟用輸入欄位。

這是有角度的 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: Maximum call stack size exceeded 發生這種情況是因為訂閱總是相互更新，這讓我進入無限回圈，如果我禁用其中一個訂閱，它作業正常，

有沒有人有任何好主意來處理這種情況？

我很欣賞任何建議，指向檔案或文章，因為我花了幾天時間搜索，但我沒有找到對我的情況有用的東西。

先感謝您。

uj5u.com熱心網友回復：

您應該在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');
  }
}

標籤：html 有角的 形式

上一篇：表單中的Textarea標簽：錯誤：標簽元素的for屬性值必須是非隱藏表單控制元件的ID

下一篇：[超詳細]Git 遠程倉庫基本操作及回滾日志常用命令