Вызов функции проверки перед отправкой формы с использованием ngNativeValidate - PullRequest
Новая
       33

Вызов функции проверки перед отправкой формы с использованием ngNativeValidate

0 голосов
/ 04 февраля 2019

Привет, я пытаюсь вызвать функцию validate (ngNativeValidate) по нажатию кнопки.

Моя форма выглядит так: 

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

Проверка работает, как и ожидалось, для кнопки SUBMIT.Я хочу такое же поведение даже для кнопки TEST CONNECTION.но не хочу отправлять форму.Как я могу это сделать?Я думаю, что будет какой-то способ просто вызвать функцию проверки по щелчку.Любая помощь приветствуется.Спасибо!заранее.

РЕДАКТИРОВАТЬ: testEndpoint является функцией вызова бэкэнда.

1 Ответ

0 голосов
/ 04 февраля 2019

В реактивных формах вы можете использовать свойства 'valid' и 'touched' формы для отображения обратной связи с пользователем, если вы пытаетесь сделать с помощью кнопки «Test connection» проверку пользовательских входных данных.

Таким образом, вы можете пропустить кнопку «Проверить соединение» и напрямую вывести следующий интервал, если форма недействительна и кнопка отправки отключена: 

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

Надеюсь, это поможет!

...