[FIXED] Check if NgControl is required

Issue

I’ve got several custom components that wrap PrimeNG components for various reasons. Some instances of my components are used in reactive forms, and the field’s "requirement" is set using Validators.required validator.

PrimeNG components provide a required attribute.

How can I inspect my component’s NgControl for the required validator? There is .disabled and .invalid, but .invalid could mean anything.

Here I what I’m using now, which works for dropdowns, but would be incorrect for any other type of input.

@Component({
  selector: 'my-component',
  templateUrl: 'my.component.html'
})
export class MyComponent implements OnInit, ControlValueAccessor {
  
  @Input()
  public disabled: boolean
  @Input()
  public required: boolean

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

    ngOnInit() {
        if (this.ngControl) {
            this.required = this.ngControl.invalid;
            this.disabled = this.ngControl.disabled;
        }
    }
}

I’m sure there is a better way to do this, but I don’t see how.

Solution

Try to check if the control has a required validator or not like the following:

  ngOnInit() {
    if (this.ngControl) {
      this.required = this.hasRequiredValidator(this.ngControl.control);
      this.disabled = this.ngControl.disabled;
    }
  }

  hasRequiredValidator(control: AbstractControl): boolean {
    if (control.validator) {
      const validator = control.validator({} as AbstractControl);
      if (validator && validator.required) {
        return true;
      }
    }
    return false;
  }

Answered By – Amer

Answer Checked By – Senaida (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published