Código HTML (con 4 casillas de verificación en formArray):
(Me estoy deshabilitando y verificando como verdadero, en la consola, pero no puedo reflejarlo en la interfaz de usuario, es decir, marque y deshabilite la primera casilla de verificación en la interfaz de usuario, al seleccionar otras tres casillas de verificación)
<div formArrayName="permissionForm"> <div *ngFor="let subModule of permissionForm.value; let i = index" [formGroupName]="i"> <input type="text" readonly formControlName="moduleGroupName" class="input-border-module" style="margin-top: 5px;" /> <br /> <label class="col-md-5 text-left"> <input type="text" readonly formControlName="subModules" class="input-border-submodule" /> </label> <input type="checkbox" formControlName="view" id="view1" /> <input type="checkbox" formControlName="add" id="add"(change)="isCheckedAdd($event)"/> <input type="checkbox" formControlName="edit" (change)="isCheckedEdit($event)" /> <input type="checkbox" formControlName="delete" (change)="isCheckedDelete($event)"/> </div> </div>Código TS: (aquí agregar, editar y eliminar son valores booleanos) (me deshabilitan y marcan como verdadero, en la consola, pero no puedo reflejarlo en la interfaz de usuario, es decir, marque y deshabilite la primera casilla de verificación en la interfaz de usuario, en la selección de otros tres casillas)
isCheckedAdd(event) { let x = < HTMLInputElement > document.getElementById("view1"); this.add = true; if (this.add == true && this.edit == true && this.delete == true) { x.checked = true; x.disabled = true; } } isCheckedEdit(event) { let x = < HTMLInputElement > document.getElementById("view1"); this.edit = true; if (this.add == true && this.edit == true && this.delete == true) { x.checked = true; x.disabled = true; } } isCheckedDelete(event) { let x = < HTMLInputElement > document.getElementById("view1"); this.delete = true; if (this.add == true && this.edit == true && this.delete == true) { x.checked = true; x.disabled = true; } }Puede usar el método disabled disable() de FormControl.
El código debe ser como el siguiente
En HTML,
<input type="checkbox" formControlName="add" id="add"(change)="isCheckedAdd(i)"/>en TS,
isCheckedAdd(i: number) { const permissionFormControls = this.form.controls.permissionForm as FormArray; // Not sure what the name of FormGroup you are using but I assume it's "form" permisionFormControls[i].controls.edit.disable(); permisionFormControls[i].controls.delete.disable(); }