0
<div [hidden]="submitted">
<div class="container" >
<h1>Employee Form</h1>
<form (ngSubmit)="onSubmit()" #employeeform= "ngForm" >
<div class="form-group ">
<label for="firstname" class="col-md-3">FirstName:</label>
<input type="text" class="form-control" id="firstname" required [(ngModel)]="model.firstname" name="firstname" #firstname="ngModel">
<div [hidden]= "firstname.valid || firstname.pristine"
class="alert alert-danger" >
FirstName Required
</div>
</div>
<div class="form-group ">
<label for="lastname">LastName:</label>
<input type="text" class="form-control" id="lastname" required [(ngModel)]="model.lastname" name="lastname" #lastname="ngModel">
<div [hidden]="lastname.valid || lastname.pristine "
class="alert alert-danger" >
LastName Required
</div>
</div>
<div class="form-group " >
<label for="employeetype">Employee Type:</label>
<select class="form-control" id="employeetype" [(ngModel)]="model.employeetype" name="employeetype">
<option *ngFor="let emtype of employeetype"[value]="emtype" >{{emtype}}</option>
</select>
</div>
<input type="submit" class="btn btn-success" (click)="newEmployee() ;employeeform.reset()" [disabled]="!employeeform.form.valid" value="submit">
</form>
</div>
</div>
<div [hidden]="!submitted">
<h2>You submitted the following:</h2>
<div class="row">
<div class="col-xs-3">Name</div>
<div class="col-xs-9 pull-left">{{ model.firstname }}</div>
</div>
<div class="row">
<div class="col-xs-3">Alter Ego</div>
<div class="col-xs-9 pull-left">{{ model.lastname }}</div>
</div>
<div class="row">
<div class="col-xs-3">Power</div>
<div class="col-xs-9 pull-left">{{ model.employeetype }}</div>
</div>
<br>
<button class="btn btn-primary" (click)="submitted=false">Edit</button>
</div>
我有我的HTML文件中像這樣和我Component.ts在本ngSubmit無法觸發功能
import { Component } from '@angular/core';
import { Employee } from './employee';
@Component({
selector: 'employee-form',
templateUrl: './employee-fom.controller.html'
})
export class EmployeeFormComponent{
employeetype=['Consultant','Fulltime Hourly','Fulltime Salaried','Parttime'];
model = new Employee(18,'sandeep','chetikam',this.employeetype[1]);
submitted = false;
onSubmit() { this.submitted = true;console.log(this.submitted); }
newEmployee() {
this.model = new Employee(42, '', '');
}
}
所以如下ngSubmit顯示觸發的onsubmit功能和更改提交到true,這樣[hidden] =「!submitted」被激活。 但ngSubmit未觸發onSubmit函數。
我不明白爲什麼。
如果你點擊提交,以及'onSubmit'當你這樣做是不是甚至稱。相反,你正在調用另外兩個函數......。 – Alex