[英]ngSubmit not executing in Angular Reactive Form
我是 angular 的新手,在看教程時正在搞亂反應形式。 我的 ngSubmit() 函數沒有執行,當我點擊提交按鈕時沒有任何反應,花一個小時試圖找到根本原因。 有人可以幫忙嗎?
員工.ts
export class Employee {
private name: string;
private email: string;
private salary: number;
private notes?: string;
}
應用組件.html
<div class="container-fluid">
<app-header></app-header>
</div>
<div class="row justify-content-lg-center">
<div class="col-md-4">
<app-employee-list></app-employee-list>
</div>
<div class="col-md-4">
<app-employee-form></app-employee-form>
</div>
</div>
員工組件.html
<form [formGroup]="reactiveForm" (submit)="employeeSubmit(this.reactiveForm.value)">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input formControlName="name" type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input formControlName="email" type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input formControlName="salary" type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea formControlName="notes" class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group">
<button type="button" class="btn btn-primary">Submit</button>
</div>
</form>
員工表單組件.ts
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
@Component({
selector: 'app-employee-form',
templateUrl: './employee-form.component.html',
styleUrls: ['./employee-form.component.css']
})
export class EmployeeFormComponent implements OnInit {
reactiveForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.reactiveForm = this.formBuilder.group({
'name': [''],
'email': [''],
'salary': [''],
'notes': ['']
});
}
ngOnInit() {
}
employeeSubmit(value) {
// tslint:disable-next-line:no-debugger
debugger;
console.log(this.reactiveForm.value);
}
}
你的按鈕應該是 type submit
,而不是 type button
<button type="submit">Submit</button>
將類型設置為button
是按鈕不應提交表單的特定說明。 當表單中有其他不是主提交按鈕的按鈕時,這很有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.