使用锚链接提交角度触发器表单

Question

我正在尝试使用模板本身内部的锚标记触发表单提交。它不像按钮控件那样工作。你能建议怎么做吗？

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

这是 stackblitz 编辑器链接，https://stackblitz.com/edit/angular-6-template-driven-form-validation-qn6zal?file=app%2Fapp.component.html

谢谢

Answer 1

您可以使用表单的onSubmit method，但它不会级联正确的$event，但您似乎不需要它。另一种选择是使用f.ngSubmit.emit()，它做同样的事情。

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

f 指的是你的表单的模板引用变量，就像你的 stackblitz 中一样：

<form name="form" #f="ngForm">