ngForm (abschicken) funktioniert nicht in Schräg 2

Question

import { Component, OnInit } from '@angular/core' 
 
import { NgForm } from '@angular/forms'; 
 
import { ActivatedRoute, Router, ParamMap } from '@angular/router'; 
 
import { Location } from '@angular/common'; 
 
import 'rxjs/add/operator/switchMap'; 
 

 
import { CustomerService } from '../services/customer.service'; 
 
import { ICustomer } from '../model/customer.model'; 
 

 
@Component({ 
 
    templateUrl: './create.customer.component.html' 
 

 
}) 
 

 
export class CreateCustomerComponent { 
 
    customer: ICustomer; 
 
    errorMessage: string; 
 
    constructor(
 
     private customerService: CustomerService, 
 
     private route: ActivatedRoute, 
 
     private routeNavigate: Router, 
 
     private location: Location) { 
 
    } 
 

 
    create(): void { 
 
     this.customerService.createCustomer(this.customer) 
 
      .subscribe(res => { 
 
       if (res) { 
 
        this.routeNavigate.navigate(['/customers']); 
 
       } 
 
      }, 
 
      error => { 
 
       var results = error['_body']; 
 
       this.errorMessage = error.statusText + ' ' + error.text; 
 
       console.log(this.errorMessage); 
 
      }); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<admin-menu></admin-menu> 
 
<hr /> 
 

 
<div> 
 
    <header class="page-header"> 
 
     <h4 class="col-sm-8 clearfix">Add Customer </h4> 
 
     <b> 
 
      <a routerLink="/customers" class="pull-right">Go to All Customers </a> 
 
     </b> 
 
    </header> 
 
</div> 
 
<div class="row"> 
 
    <div class="panel-heading" *ngIf="errorMessage"> 
 
     <div class="has-error">{{errorMessage}}</div> 
 
    </div> 
 

 
    <div class="col-sm-8 col-md-8 col-md-offset-3 col-sm-offset-1"> 
 
     <form (ngSubmit)="create()" class="form_margin" #custCreateForm="ngForm"> 
 
      <div class="form-group row hidden"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="customerId">Customer ID :</label> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8"> 
 
        <input class="form-control" 
 
          id="customerId" 
 
          type="text" 
 
          name="customerId" 
 
          [(ngModel)]="customer.Id" 
 
          #customerIdVar="ngModel" /> 
 
        <span class="help-block" *ngIf="(customerIdVar.touched || 
 
                 customerIdVar.dirty) && 
 
                 customerIdVar.errors"> 
 
         <span *ngIf="customerIdVar.errors.required"> 
 
          Customer ID is required. 
 
         </span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
      <div class="form-group row"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="firstName">FirstName : </label> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8"> 
 
        <input class="form-control" 
 
          id="firstName" 
 
          placeholder="FirstName" 
 
          required 
 
          name="firstName" 
 
          [(ngModel)]="customer.FirstName" 
 
          #firstNameVar="ngModel" /> 
 
        <span class="help-block" *ngIf="(firstNameVar.touched || 
 
                 firstNameVar.dirty) && 
 
                 firstNameVar.errors"> 
 
         <span *ngIf="firstNameVar.errors.required"> 
 
          FirstName is required. 
 
         </span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
      <div class="form-group row"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="lastName">LastName :</label> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8"> 
 
        <input class="form-control" 
 
          id="lastName" 
 
          placeholder="LastName" 
 
          required 
 
          name="lastName" 
 
          [(ngModel)]="customer.LastName" 
 
          #lastNameVar="ngModel" /> 
 
        <span class="help-block" *ngIf="(lastNameVar.touched || 
 
                 lastNameVar.dirty) && 
 
                 lastNameVar.errors"> 
 
         <span *ngIf="lastNameVar.errors.required"> 
 
          LastName is required. 
 
         </span> 
 
        </span> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group row"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="email">Email : </label> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8"> 
 
        <input class="form-control" 
 
          id="email" 
 
          type="text" 
 
          placeholder="Email" 
 
          required 
 
          name="email" 
 
          [(ngModel)]="customer.Email" 
 
          #emailVar="ngModel" /> 
 
        <span class="help-block" *ngIf="(emailVar.touched || 
 
                 emailVar.dirty) && 
 
                 emailVar.errors"> 
 
         <span *ngIf="emailVar.errors.required"> 
 
          Email is required. 
 
         </span> 
 
        </span> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group row"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="DOB">Date of Birth : </label> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8"> 
 
        <input class="form-control" 
 
          id="DOB" 
 
          type="email" 
 
          placeholder="Email" 
 
          required 
 
          name="DOB" 
 
          [(ngModel)]="customer.DOB" 
 
          #dobVar="ngModel" /> 
 
        <span class="help-block" *ngIf="(dobVar.touched || 
 
                 dobVar.dirty) && 
 
                 dobVar.errors"> 
 
         <span *ngIf="dobVar.errors.required"> 
 
          Email is required. 
 
         </span> 
 
        </span> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group row"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="address">Adress: </label> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8"> 
 

 
        <textarea class="form-control" 
 
           rows="4" cols="50" 
 
           form="usrform" 
 
           id="address" 
 
           placeholder="Address" 
 
           required 
 
           name="address" 
 
           [(ngModel)]="customer.Address" 
 
           #addressVar="ngModel"></textarea> 
 

 
        <!--<input class="form-control" 
 
          type="text" 
 
          id="address" 
 
          placeholder="Address" 
 
          required 
 
          name="address" 
 
          [(ngModel)]="customer.Address" 
 
          #addressVar="ngModel" />--> 
 
        <span class="help-block" *ngIf="(addressVar.touched || 
 
                 addressVar.dirty) && 
 
                 addressVar.errors"> 
 
         <span *ngIf="addressVar.errors.required"> 
 
          Address is required. 
 
         </span> 
 
        </span> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group row"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="contactNo">Contact No: </label> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8"> 
 
        <input class="form-control" 
 
          type="tel" 
 
          id="contactNo" 
 
          placeholder="Mobile number" 
 
          required 
 
          name="contactNo" 
 
          [(ngModel)]="customer.Address" 
 
          #contactNoVar="ngModel" /> 
 
        <span class="help-block" *ngIf="(contactNoVar.touched || 
 
                 contactNoVar.dirty) && 
 
                 contactNoVar.errors"> 
 
         <span *ngIf="contactNoVar.errors.required"> 
 
          Mobile Number is required. 
 
         </span> 
 
        </span> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group row"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="emergencyContactNo">Emergency Contact No: </label> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8"> 
 
        <input class="form-control" 
 
          type="tel" 
 
          id="emergencyContactNo" 
 
          placeholder="Mobile number" 
 
          required 
 
          name="emergencyContactNo" 
 
          [(ngModel)]="customer.Address" 
 
          #emergencyContactNoVar="ngModel" /> 
 
        <span class="help-block" *ngIf="(emergencyContactNoVar.touched || 
 
                 emergencyContactNoVar.dirty) && 
 
                 emergencyContactNoVar.errors"> 
 
         <span *ngIf="emergencyContactNoVar.errors.required"> 
 
          Emergency Contact number is required. 
 
         </span> 
 
        </span> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group row"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="isActive">Is Active_Member: </label> 
 
       </div> 
 
       <div class="col-sm-4 col-md-4"> 
 
        <input class="form-control" 
 
          type="checkbox" 
 
          id="isActive" 
 
          disabled 
 
          name="isActive" 
 
          (ngModel)="customer.IsActive_Member" 
 
          #isActiveVar="ngModel" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group row hidden"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        <label for="isDeleted">Is Deleted: </label> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8"> 
 
        <input class="form-control" 
 
          type="text" 
 
          id="isDeleted" 
 
          disabled 
 
          name="isDeleted" 
 
          [(ngModel)]="customer.IsActive_Member" 
 
          #isDeletedVar="ngModel" /> 
 
       </div> 
 
      </div> 
 

 

 
     </form> 
 
     <div class="row"> 
 
      &nbsp;&nbsp; 
 
      <button class="btn btn-primary" 
 
        type="submit" 
 
        style="width:80px;margin-right:10px" 
 
        [disabled]="!custCreateForm.valid"> 
 
       Save 
 
      </button> 
 
     </div> 
 
    </div> 
 
</div>

1. Taste Ein URL mit NgForm Inhalt zur Login-Seite einreichen umleiten Format in Abfragezeichenfolgen.
2. Ich bin mir nicht sicher, welchen Fehler ich hier mache. siehe das Bild
3. ich nicht den genauen Grund zu finden, warum seine Umleiten, anstatt Verfahren schlagen Senden oder zeigt Fehler in Konsolenprotokoll

Auf Absenden klicken Form nicht trifft den Debugger und volle Seite erfrischen

Answer 1

Sie müssen das Formular-ID in das liefern, wenn ein Formular abgeschickt ..

<form (ngSubmit)="create(custCreateForm)" class="form_margin" #custCreateForm="ngForm">