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>
答案 0 :(得分: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]
});
答案 1 :(得分:0)
我们为复选框创建更改事件:
<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