angular 8 reactive form with custom ng-select not touched programmatically

Question

I have a custom angular reactive form with ng-select in it with other components. While validating the form I added the below code

private validateCustForm() {
    this.validation.touchFormControls(this.appointmentForm);
    if (this.appointmentForm.invalid) {
      return false;
    }
return true;
}

to show the validation message when click on the submit button. It is working with all the form elements except for the custom ng-select element

Is there any way to make the custom ng-select element get touched programmatically after I click on the submit button?

Can you share your full code? – Shashikant Devani Sep 17 '19 at 07:17 — Shashikant Devani, Sep 17 '19 at 07:17

score 0 · Answer 1 · answered Sep 17 '19 at 06:55

Well, if I understood correctly, you want to focus on some input field if your form isnt submitted.

Try for focus, available with angular material ( i guess you are using angular material here ) . It has MdInputDirective which has a focus() method. You can us ViewChildren for referencing and then pass something like below ->

this.inputs.find(input => !input._ngControl.valid).focus()

Let me know if this helps

angular 8 reactive form with custom ng-select not touched programmatically

1 Answers1