ngFormは、（提出）には、ボタンのURLを送信する角度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. が動作していないクエリ文字列形式でNgFormコンテンツをログインページにリダイレクトします。
2. 私はここで何をしているのか分かりません。私はむしろ、コンソールログ

で、[送信]をクリックしフォームのエラーをする方法を提出押すか示すよりもそのリダイレクトは、デバッガやページ全体を打っていない正確な理由を見つけない

画像を見ますフォームを送信する際に、フォームIDを提供する必要があり、リフレッシュ

Answer 1

を取得。..

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