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

处理代码中的路由：

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

您需要注入路由器：

constructor(private router: Router) {}

角度错误：表单提交已取消，因为表单未连接

1 个答案: