角度誤差：フォームが接続されていないため、フォームの提出は、キャンセル

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()"> 

ハンドルをルーティンコード内のG：

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

あなたは、ルータを注入する必要があります。

constructor(private router: Router) {}