使用角度8取消选中复选框时如何保持输入禁用

Question

我在 Angular8 中使用响应式表单进行表单绑定。在这里，最初表单是禁用的，当我点击编辑按钮时，表单是启用的，但是在这里，只有在选中复选框时才应该启用输入，或者应该禁用它。

Ts：

 edit() {
    this.form.enable()
  }
  restrict() {
      this.form = this.FB.group({
      array: this.FB.array(
        this.values.map(x => this.FB.group({
          boolValue: this.FB.control(x.boolValue),
          datetime: [
          { value:x.datetime, disabled: !x.boolValue }]
        }))
      )
    });    
     this.form.valueChanges.subscribe(data => {
          this.formEdit = true;
          console.log('agentSettingsInfoForm', data,this.formEdit)
        })
     this.w9InfoDetails.valueChanges.subscribe(data => {
        this.formEdit = true;
          console.log('agentSettingsInfoFormdate', data,this.formEdit)
     }) 
  }

DEMO

Answer 1

在 stackblitz 示例中调整了您的代码，这里是您需要进行的更改才能实现您的期望。

将整个表单包裹在 <fieldset> 中，并默认将其设置为禁用。

<fieldset [disabled]="disabled">
 <form [formGroup]= "form" (submit)="onSubmit()">
  ......

在组件中将默认值分配给disabled

disabled = true; // set default disabled true
form: FormGroup;    
selected: string[] = [];
......

从 ngOnInit 中移除表单禁用

 ngOnInit() {
  this.restrict();
  // this.form.disable() <== remove it
 }   

最后在edit方法中设置disabled false

  edit() {
   this.disabled = false;
   // this.form.enable() <== remove this
  }

这是 stackblitz DEMO 我更新了你的代码

希望这能解决您的问题。