ngSubmit無法觸發功能

<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函數。

我不明白爲什麼。

來源

2017-06-01 prasad

如果你點擊提交，以及'onSubmit'當你這樣做是不是甚至稱。相反，你正在調用另外兩個函數......。 – Alex

你正在調用employeeform.reset()功能在同一個按鈕類型提交。請改變這一點。我認爲那將是問題。

請從按鈕刪除復位功能，並將其納入組件

onSubmit() { 
    this.submitted = true; 
    console.log(this.submitted); 
    this.employeeform.reset(); 
}

來源

2017-06-01 06:54:51 sainu

ngSubmit無法觸發功能

回答

相關問題