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>

在提交按钮URL上，使用查询字符串格式的NgForm内容重定向到登录页面。
我不确定我在这里做错了什么。见图像
我没有找到重定向的确切原因，而不是在控制台日志中点击提交方法或显示错误

enter image description here

在提交点击表单没有点击调试器并且整页被刷新

Answer 1

您需要在提交表单时提供表单ID ..

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

ngForm（提交）在Angular 2

1 个答案: