HTML code (with 4 checkboxes in formArray) :
( I am getting disabled and checked as true, in console, but is unable to reflect it in UI , i.e check and disable the first checkbox on UI, on selection of other three checkboxes)
<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>TS Code : (Here add, edit and delete are boolean values) ( I am getting disabled and checked as true, in console, but is unable to reflect it in UI , i.e check and disable the first checkbox on UI, on selection of other three checkboxes)
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;
}
}You can use disable() method of FormControl.
The code should be like the following
In HTML,
<input type="checkbox" formControlName="add" id="add"(change)="isCheckedAdd(i)"/>
In 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();
}