Check if NgControl is required

Question

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.

Answer 1

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;
  }

UPDATE:

From Angular 12.2.0, to check if the NgControl has the required validator or not, we can use the AbstractControl.hasValidator() API which has been introduced in Angular 12.2.0 (Like how MatInput shows required asterisk when using required validator)

  constructor(@Optional() @Self() private ngControl: NgControl) {}

  ngOnInit() {
    if (this.ngControl) {
      this.required = this.ngControl?.control?.hasValidator(Validators.required);
    }
  }