각도 오류 : 양식이 연결되지 않아 양식 제출이 취소

Question

내가 뭘하려고입니다 - 내가 기존 폼에 폼을 추가하려고

하지만 데이터는

를 저장 안한다

콘솔의 전시 형태 관련 - 오류가 오는 것을

누락되었습니다. 어떻게 내가 다음 코드와 연결할 수 있습니까?

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

다른 작업을 해결하기 위해이에서 이동하는 데 도움이 필요합니다 .. 코드는 아래 링크를 참조하시기 바랍니다 : 클릭 뒤에

코드는 다음과 같은 것입니다.

여기에 코드를 게시해야하는 경우에도 답변 해 드리겠습니다. 답변 해주십시오. 고맙습니다.

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 :

constructor(private router: Router) {}