时间戳

首页 > 解决方案 > 使用angular8取消选中复选框时如何保持禁用输入

javascript - 使用angular8取消选中复选框时如何保持禁用输入

问题描述

我在 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)
     }) 
  }

演示

标签： javascriptangular

解决方案

在 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() {
   this.disabled = false;
   // this.form.enable() <== remove this
  }

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

希望这能解决您的问题。

推荐阅读