2回答

接灰的电子产品

2024-01-04

已采纳

就是一个判断条件啊，判断是否dirty 然后给对应的css 属性

0

2

simple8514650

非常感谢！

2024-01-04

共2条回复

接灰的电子产品

2024-01-04

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validator, FormControl } from '@angular/forms';

@Component({
  selector: 'app-uppercase-input',
  template: `
    <input type="text" [(ngModel)]="value" (input)="onInput()" (blur)="onBlur()">
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => UppercaseInputComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => UppercaseInputComponent),
      multi: true,
    },
  ],
})
export class UppercaseInputComponent implements ControlValueAccessor, Validator {
  value: string = '';
  touched: boolean = false;

  propagateChange = (_: any) => {};
  validateFn: any;

  constructor() {
    this.validateFn = this.validate.bind(this);
  }

  // ControlValueAccessor implementation
  writeValue(value: any): void {
    if (value !== undefined) {
      this.value = value;
    }
  }

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

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

  onInput() {
    this.value = this.value.toUpperCase();
    this.propagateChange(this.value);
  }

  onBlur() {
    this.touched = true;
    this.validateFn(null);
  }

  // Validator implementation
  validate(control: FormControl) {
    if (this.touched && !this.value) {
      return { required: true };
    }

    return null; // Validation passed
  }
}

自己参考一下吧

0

0