Javascript 带有错误消息的角度自定义表单输入

我想创建一个自定义表单输入，它只是普通输入的包装，如果

formControl

无效，它会显示一条错误消息

因此，我制作了一个实现

ControlValueAccessor

的组件，但现在我想显示错误消息，我意识到我没有

FormControl

，因此我需要将其作为

@Input（）

传递。问题是。。。如果我可以将

FormControl

作为输入传递，那么为什么要首先实现ControlValueAccessor呢？我很困惑

html

<input  
  [placeholder]="placeholder"
  [type]="type" 
  [(ngModel)]="value"
  (keyup)="onChange()"
  (change)="onChange()" 
  (blur)="onTouched()" 
  [disabled]="disabled"/>

@Component({
  selector: 'input-app',
  templateUrl: './input.component.html',
  providers: [
    { 
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})
export class InputComponent implements ControlValueAccessor {

  @Input() type = 'text';
  @Input() placeholder = 'placeholder';
  @Input() errorMsg = '';
  value: string;
  disabled: boolean;
  private onChangeFn;
  private onTouchedFn;

  writeValue(val: string | number): void {
    this.value = val;
  }

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

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

  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  onChange(){
    this.onChangeFn(this.value);
  }

  onTouched(){
    this.onTouchedFn();
  }

}