Angular 12 - TypeError: Cannot read properties of null (reading 'writeValue')

Discussão em 'Angular' iniciado por Islam Mohamed, Maio 3, 2025.

  1. Angular 12 - TypeError: Cannot read properties of null (reading 'writeValue')

    I'm creating a generic text input component, everything works well while serving the project, but in the built project I get this error:


    TypeError: Cannot read properties of null (reading 'writeValue')
    ​

    HTML:

    <div class="p-field">
    <label>{{label}} <span class="p-error">{{checkRequired(ngControl.control) ? '*' : ''}}</span></label>
    <input class="full-width" [type]="type" pInputText [formControl]="ngControl.control">

    <small *ngIf="ngControl.control.touched && ngControl.control.errors?.required" class="p-error">{{label}} is required</small>


    <small *ngIf="ngControl.control.errors?.minlength" class="p-error">
    {{label}} must be at least {{ngControl.control.errors.minlength['requiredLength']}}
    </small>

    <small *ngIf="ngControl.control.errors?.maxlength" class="p-error">
    {{label}} must be at most {{ngControl.control.errors.maxlength['requiredLength']}}
    </small>
    <small *ngIf="ngControl.control.errors?.email" class="p-error">
    This email is not valid
    </small>

    <small *ngIf="ngControl.control.errors?.isMatching" class="p-error">Passwords do not match</small>
    </div>


    component.ts

    import { Component, Input, OnInit, Self } from '@angular/core';
    import {AbstractControl, ControlValueAccessor, NgControl} from '@angular/forms';

    @Component({
    selector: 'app-text-input',
    templateUrl: './text-input.component.html',
    styleUrls: ['./text-input.component.css']
    })
    export class TextInputComponent implements ControlValueAccessor {
    @Input() label: string;
    @Input() type = 'text';

    constructor(@Self() public ngControl: NgControl) {
    this.ngControl.valueAccessor = this;
    }

    checkRequired(control) {
    if (control.validator) {
    const validator = control.validator({} as AbstractControl);
    if (validator && validator.required) {
    return true;
    }
    }
    }

    writeValue(obj: any): void {
    }

    registerOnChange(fn: any): void {
    }

    registerOnTouched(fn: any): void {
    }

    }



    Angular info:

    Angular CLI: 12.2.6 Node: 14.17.3 Package Manager: npm 6.14.13 OS: win32 x64 Angular: 12.2.6

    Continue reading...

Compartilhe esta Página