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

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>

演示

Answer 1

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

在这些更改之后，您可以禁用字段。

1. 从输入中删除[disabled]属性。

2. 将事件添加(更改(到复选框

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

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

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

使用此方法，您可以从禁用中的所有字段。

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

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

演示

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