Question

我需要使用其他单击的按钮而不是“提交”按钮来提交Angular反应形式。

<form [formGroup]="productForm" (submit)="updateProduct($event)" novalidate>
    <mat-form-field appearance="outline" class="col-lg-4 col-md-6 col-sm-12">
    <mat-label>Product Name</mat-label>
    <input matInput placeholder="Product Name" aria-label="Product Name" formControlName="Name" maxlength="70" required>
     </mat-form-field>
</form>

<button class="btn btn-md btn-primary text-upper" type="button">Save</button>

我没有“提交”按钮，我需要单击保存按钮时提交表单，并同时获取productForm.value。

Answer 1

尝试这样 template.html

<button class="btn btn-md btn-primary text-upper" type="button" (click)="updateProduct()">Save</button>

component.ts

updateProduct() {
 console.log(this.productForm.value);
}

Answer 2

<form [formGroup]="productForm" novalidate>
    <mat-form-field appearance="outline" class="col-lg-4 col-md-6 col-sm-12">
    <mat-label>Product Name</mat-label>
    <input matInput placeholder="Product Name" aria-label="Product Name" formControlName="Name" maxlength="70" required>
     </mat-form-field>
</form>
    <button (click)="updateProduct($event)" class="btn btn-md btn-primary text-upper" type="submit">Save</button>

已编辑。将click事件与按钮上的方法一起使用。

Answer 3

声明局部变量。
将默认值分配给表单控件
更新组件HTML

app.component.ts

productForm: FormGroup
this.productForm = this.formBuilder.group({
  Name : [""]
})
private Save()
{
   console.log(this.productForm.value)
}

app.component.html

<button class="btn btn-md btn-primary text-upper" type="button" (click)="Save()">Save</button>

还在输入按钮中添加[formGroup] =“ productForm”

通过单击按钮提交角反应式表单

3 个答案: