Angular 在角度6中重置反应形式时，输入不禁用

我已经为我的问题创造了一个新的解决方案

我有一个

FormService

，它构建了一个表单，该表单由

initForm（）方法中的组件获得：-

public getForm() {
  return this.fb.group({
    cb1: this.fb.control(false),
    cb2: this.fb.control(false),
    inputBox: this.fb.control({value: '', disabled: true}, Validators.required)
  });
}

如果没有选中任何复选框，我需要禁用输入文本框。这让我做了这样的事情：-

if(!this.cb1.value && !this.cb2.value) {
  this.isCheckboxSelectionInvalid = true;
  this.inputBox.disable();
} else {
  this.isCheckboxSelectionInvalid = false;
  this.inputBox.enable();
}

这适用于所有默认场景-但是存在一个问题。当我调用
resetForm（）
（前提是通过选中其中一个复选框启用了输入）它基本上调用了相同的
initForm（）
方法时，输入保持启用状态。这甚至是在我调用了验证复选框选择并禁用
initForm（）
方法中的输入的方法之后

为了保持理智，我记录了输入的
disabled
属性的值，该属性记录
true

为什么输入没有被禁用呢？非常感谢您的帮助，这是工作中的一个问题。
不创建另一个表单实例，实际重置现有表单如何

  resetForm() {
    this.form.reset({
      cb1: false,
      cb2: false
    });
    this.validateCheckboxSelectionAndChangeInputState();
  }

您面临的问题与角度错误有关，您可以找到更多信息

有一些变通方法对我有效：

在setTimeout内调用disable函数
validatecheckboxselection和changeinputstate（）{
如果（！this.cb1.value&&！this.cb2.value）{
this.isCheckboxSelectionInvalid=true；
设置超时（（）=>{
this.inputBox.disable（）；
}, 0);
}否则{
this.isCheckboxSelectionInvalid=false；
这个.inputBox.enable（）；
}
}

直接设置禁用属性：


在调用启用/禁用函数之前调用detectChanges
validatecheckboxselection和changeinputstate（）{
此.ref.detectChanges（）；
如果（！this.cb1.value&&！this.cb2.value）{
this.isCheckboxSelectionInvalid=true；
this.inputBox.disable（）；
}否则{
this.isCheckboxSelectionInvalid=false；
这个.inputBox.enable（）；
}
}


与问题无关的建议：


怀着​​启用或禁用控件，您可以订阅表单：

您还可以使用form.valid和Validators.requiredTrue[禁用]按钮：

html

请参见
不起作用。我也试过了。这是因为在调用
reset
时，表单值被设置为
null
。这不会禁用input.Edit。但是您应该考虑添加Frand组验证。这仍然不起作用。尝试此操作-通过切换两个复选框来启用inputBox。在输入框中键入一些内容，然后单击重置按钮。期望值-由于两者均为
false
，因此应禁用
输入框
。现实-
inputBox
是
启用的
，我们可以输入它。这看起来越来越像Angular本身实现的一个bug。是的，我看到输入没有被禁用，我添加了一个setTimeout（（）=>{This.inputBox.disable（）；}，0）；它很管用，很奇怪，看起来像个虫子，嘿，发现得好！我试图先找到它，但没有成功。不过，setTimeout hack仍然有效！接受这个答案。
  initForm() {
    this.form = this.formService.getForm();
    this.cb1 = this.form.get("cb1");
    this.cb2 = this.form.get("cb2");
    this.inputBox = this.form.get("inputBox");
    this.form.valueChanges.subscribe(
      this.validateCheckboxSelectionAndChangeInputState.bind(this)
    );     
  }

  validateCheckboxSelectionAndChangeInputState(controls) {
    if (this.inputBox.disabled && controls.cb1 && controls.cb2) {
      this.inputBox.enable();
    } 
    if(this.inputBox.enabled && !controls.cb1 && !controls.cb) {
       setTimeout(() => {
          this.inputBox.disable();
       }, 0);
    } 
  }

  toggleCb1() {
    this.cb1.setValue(!this.cb1.value);
  }

  toggleCb2() {
    this.cb2.setValue(!this.cb2.value);
  }

  resetForm() {
    this.initForm();
  }

 <button [disabled]="!form.valid" (click)="submitForm()">
    Submit
  </button>

public getForm() {
    return this.fb.group({
      cb1: this.fb.control(false, [Validators.requiredTrue]),
      cb2: this.fb.control(false, [Validators.requiredTrue]),
      inputBox: this.fb.control(
        { value: "", disabled: true },
        [Validators.required]
      )
    });
  }