Angular 12 - 类型错误：无法读取 null 的属性（读取“writeValue”）

Question

Angular 12 - 类型错误：无法读取 null 的属性（读取“writeValue”）

我正在创建一个通用文本输入组件，在为项目服务时一切正常，但在构建的项目中我收到此错误：

类型错误：无法读取 null 的属性（读取“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>

组件.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 信息：

Angular CLI：12.2.6 节点：14.17.3 Package 管理器：npm 6.14.13 操作系统：win32 x64 Angular：12.2.6

Answer 1

缺少提供程序设置时发生错误

  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi:true,
      useExisting: CUSTOMER_INPUT_CLASS_HERE
    }
  ]  

在你的情况下

@Component({
  selector: 'app-text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi:true,
      useExisting: TextInputComponent
    }
  ]
})
export class TextInputComponent implements ControlValueAccessor {
...
}

Answer 2

也许有点晚了，但它可能会帮助这里的人：

当我将formControlName附加到mat-radio-button而不是mat-radio-group时出现此错误。

Answer 3

在构造函数中使用@Optional()并进行空检查：

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

此外，将正文添加到方法中，例如

writeValue(value: number): void {
    this.value = value;
    this.onChange(this.value);
}

onChange: (_: any) => void = (_: any) => {};

onTouched: () => void = () => {};

registerOnChange(fn: any): void {
    this.onChange = fn;
}

registerOnTouched(fn: any): void {
    this.onTouched = fn;
}

Answer 4

当我尝试在验证逻辑的后端部分进行授权检查时出现此错误。 我在 formbuilder 组中声明了提交按钮。 当我使用带有 style="display: none" 的输入时，一切都很好。

Answer 5

就我而言，出现了特定错误，因为我没有在模块导入中添加特定组件。

Answer 6

检查 module.ts。 我们需要将 DropDownsMoudle 导入到用户下拉列表中。

从“@progress/kendo-angular-dropdowns”导入 {DropDownsModule}；

Answer 7

我建议您创建一个名为 SharedModule 的模块，您将在声明数组中声明所有共享组件。 在您的导出数组中，导出自定义文本输入组件。 然后在需要使用该组件的地方，将共享模块导入到您的 app.module 中。 记得去掉 app.module 中的 input 声明，只导入 sharedModule。 还要记住在 sharedModule.ts 中导入 ReactiveFormsModule 和 FormsModule