simontonsoftware / s-libs

A collection of libraries for any of javascript, rxjs, or angular.
MIT License
43 stars 5 forks source link

`WrappedFormControlSuperclass` validators not work #82

Closed piotrGTX closed 2 years ago

piotrGTX commented 2 years ago

Hello, I think I found a bug.

"s-libs" version 14.0.0 "angular" version 14.0.7

I create component like this:

TS:

@Component({
  selector: 'app-input-number',
  templateUrl: './input-number.component.html',
  styleUrls: ['./input-number.component.scss'],
  providers: [provideValueAccessor(InputNumberComponent)]
})
export class InputNumberComponent extends WrappedFormControlSuperclass<number> {
  get showErrors(): boolean {
    return this.control.invalid && this.control.dirty
  }
}

HTML:

<input [formControl]="control" type="number" />
<div *ngIf="showErrors">
  <span *ngFor="let errorEntry of control.errors | keyvalue">{{ errorEntry | json }}</span>
</div>

USAGE:

this.formBuilder.group({
  share: this.formBuilder.control(0, {
    nonNullable: true,
    validators: [Validators.required, Validators.min(1), Validators.max(100)]
  }),
});

"control.errors" has always a null value 😢 I found solution -> reassign control in ngAfterContentInit in But maybe I do something wrong 💻

SOLUTION:

  ngAfterContentInit(): void {
    const ctrl = this.injector.get(NgControl);
    ctrl.valueAccessor = this;
    this.control = ctrl.control as FormControl<InputType>;
  }
ersimont commented 2 years ago

Ohhh interesting. You indeed found a bug, thank you for reporting it. To my surprise, I see that the timing of formControlName is different than ngModel. So I see the cause of the problem ... now to find a solution ...

ersimont commented 2 years ago

This should be fixed in the next release (see commit linked by Git directly above)