I have developed disable and enable functionality in angular. When I click on enable I get the data and it's working fine but when I click on disable I am getting the error
"cannot read properties native element".
html file -
<div *ngIf="disabled" [attr.disabled]="disabled">
<div class="masking" [ngClass]="{'disable': mask1}" id='mask1' (window:resize)="onResizePM($event)" #Mask1
style="position: absolute;" [style.top.px]='Privacy_y'
(mousedown)="handlePrivacyMousedown($event)" (mousedown)='onWindowPress($event)'
(mousemove)='handlePrivacyMousemove($event)' (mousemove)='onWindowDrag($event)'
[style.left.px]='Privacy_x' [style.width.px]='width' [style.height.px]='height'
[style.display]="displayMask1">
<div (mousedown)='onCornerClick($event, topLeftResize)' id='mask1-top-left-resize'
class='mask1-corner-resize masking-resize'></div>
</div>
ts file ----
privacyMaskForm: FormGroup = this.formBuilder.group({
enable: [{ value: 0, disabled: false }],
})
channelTitleForm: FormGroup = this.formBuilder.group({
en: [{ value: 1, disabled: false }],
string_1: [{ value: '56Secure Cam', disabled: false }, [Validators.required, Validators.maxLength(12), Validators.pattern(AppConstant.Regex.overlay_name), Validators.minLength(3),]],
align: [{ value: 0, disabled: false }],
})
timeTitleForm: FormGroup = this.formBuilder.group({
e: [{ value: 1, disabled: false }],
week: [{ value: false, disabled: false },],
});
customoverlayForm: FormGroup = this.formBuilder.group({
en: [{ value: 0, disabled: false }],
string_1: [{ value: '', disabled: false }, [Validators.required, Validators.maxLength(25), Validators.pattern(AppConstant.Regex.overlay_name), Validators.minLength(3)]],
});
en_privacy() {
//this.toggle = true;
//this.disabled = true;
let inputValue = this.privacyMaskForm.value;
if(inputValue.enable == 1){
this.disabled = true;
}
else{
//this.privacyMaskForm.get('maskControl')?.disable();
this.disabled = false;
}
console.log(inputValue);
if (inputValue.enable == 1) {
this.main = false;