отправка формы триггера angular с использованием якорной ссылки

Я пытаюсь инициировать отправку формы с помощью тега привязки внутри самого шаблона. Он не работает, как кнопка. Не могли бы вы подсказать, как это сделать?

<!-- main app container -->
<div class="jumbotron">
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <h3>Angular 6 Template-Driven Form Validation</h3>
            <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
                <div class="form-group">
                    <label for="firstName">First Name</label>
                    <input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }" required />
                    <div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
                        <div *ngIf="firstName.errors.required">First Name is required</div>
                    </div>
                </div>


                <div class="form-group">
                    <a class="btn btn-primary" (click)="f.ngSubmit.emit()">Link Submit </a>
                    <button  class="ml-2 btn btn-primary" >Button Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

This is the stackblitz editor link, https://stackblitz.com/edit/angular-6-template-driven-form-validation-qn6zal?file=app%2Fapp.component.html

Спасибо


angular validation forms angular9
person sajin tm    schedule 18.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать onSubmit метод формы, но он не будет каскадировать правильный $event, но кажется, тебе это не нужно. Другой вариант - использовать f.ngSubmit.emit(), который делает то же самое.

<a class="btn btn-primary" (click)="f.onSubmit()">Link Submit</a>

Где f относится к ссылочной переменной шаблона вашей формы, как в вашем stackblitz:

<form name="form" #f="ngForm">
person Robin De Schepper    schedule 18.05.2020
comment
Спасибо за ответ @robin, onSubmit () работает, но ngSubmit.emit () не работает. - person sajin tm; 19.05.2020
comment
Обновил код stackblitz этим. stackblitz.com/ edit /, чтобы показать разницу. Тем не менее emit () может быть более значимым решением, чем onSubmit (), но интересно, как это работает в обратном порядке. - person sajin tm; 19.05.2020
comment
Странный! Ваш stackblitz с f.ngSubmit.emit() работал у меня в вашем исходном stackblitz (но изначально это не так), и обе кнопки работают для меня в stackblitz, который вы отправили в своем последнем комментарии. То есть они оба отображают одно и то же предупреждающее сообщение, это что-то еще не работает? - person Robin De Schepper; 19.05.2020
comment
Ой, это удивительно !. Я проверил ту же ссылку в IE Edge, и она там работает, а хром - нет. Какой браузер вы проверяли? - person sajin tm; 19.05.2020
comment
Я также использую Chrome: s Я не проверял консоль на наличие ошибок, когда f.ngSubmit.emit() не работал. А ты, может, что-то печатается? - person Robin De Schepper; 19.05.2020