Calling validate function before submiting the form using ngNativeValidate

Question

I am trying to call the validate(ngNativeValidate) function on click of button.

My form look like:

<form #myForm="ngForm" (ngSubmit)="addEndpoint(myForm.value);" ngNativeValidate>
        <section class="form-block">
            <div class="form-group">
                <input type="text" placeholder="name" name="name" [(ngModel)]="myData.name" [hidden]="true">
            </div>
            </section>
        <button type="button" class="btn btn-outline" (click)="testEndpoint(myForm.value);">TEST CONNECTION</button>
        <button type="submit" class="btn btn-primary" [disabled]="disableSubmit">SUBMIT</button>
    </form>

Validation works as expected for SUBMIT button. I want the same behavior even for TEST CONNECTION button. but don't want to submit the form. How I can do it? I think there will be some way to just call the validator function on-click event. Any help is appreciated. Thanks! in advance.

testEndpoint is a backend call function.

(keydown)="testEndpoint(myForm.value);" so keydown event you can check the connection one way — Hameed Syed
– Hameed Syed, Commented Feb 4, 2019 at 10:44

TylerH · Accepted Answer · 2022-11-03 19:00:44Z

0

In reactive forms you can use the 'valid' and 'touched' properties of the form to display feedback to the user if what you are trying to do with 'Test connection' button is to check user inputs.

Therefore, you could skip the 'test connection' button and directly output the following span if the form is invalid and the button submit disabled:

<button type="submit" class="btn btn-primary" [disabled]="disableSubmit">SUBMIT</button>
<span *ngIf="!myForm.valid && myForm.touched" class="help-block">Please enter valid data!</span>

edited Nov 3, 2022 at 19:00

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Feb 4, 2019 at 11:09

Santironhacker

1,0249 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shashi Ranjan Over a year ago

Indeed this is one way, which is available everywhere on internet. But while form submit I do not want to write any span code. In default behavior, the focus goto exactly at the same place of problem. I want exactly that behavior.

Flo · Accepted Answer · 2022-11-03 19:40:53Z

0

I think here is a solution: Trigger Input Validation

So, follow this link, you can try this: form.controls['myControl'].updateValueAndValidity();.

You can "validate" the complete form, too. Like: this.myForm.markAllAsTouched();

Have fun!

Greetings, Florian

answered Nov 3, 2022 at 19:40

Flo

3,3022 gold badges15 silver badges29 bronze badges

Collectives™ on Stack Overflow

Calling validate function before submiting the form using ngNativeValidate

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related