Angular 反应式 forms - 获得最大长度？

Question

I'm using angular reactive forms for a component library, and there are some requirements for the project that would be made much easier if I could just get the associated maxlength validator (if one exists) inside a form control (it's supposed to show how many characters are left when the EU is typing)

Specifically, I want to do it from within the component , based on whatever maxlength validator was used, as this is a generic branded component library for use within my company.

As far as I can tell, the only way to do this is to pass in the maxlength separately from the validators - but figured I'd ask The Internets to see if there's a cooler way.

I've implemented (and modernized for angular 12) the ControlValueAccessorConnector solve from https://medium.com/angular-in-depth/dont-reinvent-the-wheel-when-implementing-controlvalueaccessor-a0ed4ad0fafd - so I have access to all those properties.

Any help - or a validation that what I'm looking for is not gonna happen - would be appreciated!

Answer 1

thre're not a "relation" between a FormControl and a input (a FormControl is independient of the input), so you can not access to the htmlElement input if you not use one around-work: a directive

If the selector of one directive is '[formControl], [formControlName]' it is applied to all the inputs with formControl and FormControlName.

We inject in constructor the NgControl and the ElementRef

constructor(private control:NgControl,private el:ElementRef) { }

So we can access to the function validator of the control using this.control.control.validator . See that in this way we access to the "function". And as all the function we can feed with a FormControl and get the result. In this case we are feeding with a FormControl very large

The directive can be some like

@Directive({
  selector: ''[formControl], [formControlName]''
})
export class AddMaxLengthDirective implements OnInit{

  constructor(private control:NgControl,private el:ElementRef) { }
  ngOnInit()
  {
    const err=this.control.control.validator(
            new FormControl(".".repeat(10000000)))

    if (err && err.maxlength && err.maxlength.requiredLength)
         this.el.nativeElement.setAttribute(
                 'maxlength',err.maxlength.requiredLength)

  }

}

You can see in this stackblitz . If you use F12, you can inspect the DOM and see how is added the maxlength attribute

NOTE: don't forget add the directive in your module!