角度误差：表单提交取消了，因为形式没有连接

Question

我所试图做的是 -

我想一个形式添加到现有的形式，但该数据未获得存储

错误来干什么 -

在控制台的表现形式连接缺少..我如何将它与下面的代码连接起来？

点击后面的代码是这样的：

<button type="submit" class="btn btn-default" routerLink="../viewemployee" [disabled]="empForm.invalid">Add Employee</button> 

请参考以下链接的代码..需要帮助，从这个移动到解决其他任务。

如果需要在这里发布代码，我会做。请回答并回复。 Thanx提前。

How to connect the form in angular routing

createemployee.component.html

<h2>Add Employee:</h2> 
     <form class="form-horizontal" #empForm="ngForm"> 
     <div class="form-group"> 
      <label class="control-label col-sm-2" for="name">Name:</label> 
      <div class="col-sm-10"> 
      <input type="text" class="form-control" name="name" minlength="4" maxlength="10" pattern="^[A-Za-z0-9]*[A-Za-z0-9][A-Za-z0-9]\S*$" [(ngModel)]="model.name" placeholder="Enter Your Name" 
        #name="ngModel" required/> 
      <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger"> 
       <div *ngIf="name.errors.required"> 
       Name is required. 
       </div> 
       <div *ngIf="name.errors.pattern"> 
       No Spaces 
       </div> 
       <div *ngIf="name.errors.minlength"> 
       Name must be at least 4 characters long. 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="control-label col-sm-2" for="position">Position:</label> 

      <div class="col-sm-10"> 
      <input type="text" class="form-control" name="position" minlength="4" maxlength="10" pattern="^[a-z]*$" [(ngModel)]="model.position" placeholder="Enter your position" 
        #position="ngModel" required /> 
      <div *ngIf="position.invalid && (position.dirty || position.touched)" class="alert alert-danger"> 
       <div *ngIf="position.errors.required"> 
       Position is required. 
       </div> 
       <div *ngIf="position.errors.pattern"> 
       Only Alphabets are must be entered 
       </div> 
       <div *ngIf="position.errors.minlength"> 
       Position must be at least 4 characters long. 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="control-label col-sm-2" for="salary">Salary:</label> 
      <div class="col-sm-10"> 
      <input type="text" class="form-control" name="salary" pattern="[0-9]*" 
        minlength="5" maxlength="7" [(ngModel)]="model.salary" placeholder="Enter Salary" #salary="ngModel" required /> 
      <div *ngIf="salary.invalid && (salary.dirty || salary.touched)" class="alert alert-danger"> 
       <div *ngIf="salary.errors.required"> 
       Salary is required. 
       </div> 
       <div *ngIf="salary.errors.minlength"> 
       Salary must be in 5 numbers. 
       </div> 
       <div *ngIf="salary.errors.maxlength"> 
       Salary must not be exceeded morethan 7 numbers. 
       </div> 

       <div *ngIf="salary.errors?.pattern">Only numebers should be typed 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10"> 
      <button type="submit" class="btn btn-default" routerLink="../viewemployee" [disabled]="empForm.invalid">Add Employee</button> 
      <button type="button" class="btn btn-default" routerLink="../home">Cancel</button> 
      </div> 
     </div> 
     </form> 

Answer 1

你可以改变你的组件，如下所示：

事件处理程序添加到窗体：

<form (ngSubmit)="continue()"> 

手柄例程克代码：

continue() { 
    ... 
    this.router.navigateByUrl("../viewemployee"); 
} 

你需要注入路由器：

constructor(private router: Router) {}