Question

Onload 本身文本框是禁用模式，如果我们选择复选框，文本框应该被启用，取消选中文本框应该是禁用模式并且没有错误边框。我尝试了下面的代码，验证工作正常但无法禁用/启用复选框，请帮我解决这个问题..

<input type="checkbox" #chkEnable ngModel />
<label>CheckBox Select to Enable/Disable</label>
<div class="form-group">
    <label>First Name</label>
    <input type="text" [disabled]="!chkEnable.checked" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': ( f.firstName.touched)  && f.firstName.errors }" />
    <div *ngIf="((f.firstName.touched) && f.firstName.errors)" class="invalid-input"></div>
</div>

Demo

Answer 1

您不能从 HTML 中禁用响应式表单字段。如果您想禁用反应式，可以使用反应式中的 disable() 方法。

进行这些更改后，您可以禁用字段。

从输入中移除 [disabled] 属性。
向复选框添加（更改）事件

<input type="checkbox" #chkEnable ngModel (change)="disableField(chkEnable.checked)" />

在 .ts 文件中创建禁用输入的方法

disableField(checked) { Object.keys(this.f).forEach(key => { if (!checked) { this.f[key].disable(); } else { this.f[key].enable(); } }); }

使用此方法可以禁用 from 中的所有字段。

此外，如果您想在加载时禁用字段，您可以通过以下代码更改表单

this.registerForm = this.formBuilder.group({
  firstName: [{ value: "", disabled: true }, Validators.required],
  lastName: [{ value: "", disabled: true }, Validators.required]
});

Demo

Answer 2

我们为复选框创建更改事件：

<input type="checkbox" (change)="isChecked($event)">
   
isChecked(event){
    let isChecked=event.target.value; 
    if (isChecked) {                         
          this.registerForm.get("firstName").disable();
          this.registerForm.get("lastName").disable();
    } 
    else {
          this.registerForm.get("firstName").enable();
          this.registerForm.get("lastName").enable();
    }
}

我还附上了链接https://stackblitz.com/edit/checkbox-to-enable-disable-2bqfkf?file=app/app.component.ts

复选框选择以使用角度反应形式启用/禁用文本框

2 个答案: