Question

我是Angular的新手，我试图在SwitchCase上进行表单验证。在SwitchCase 0上我有一个表单，我想要的是提交该信息，同时将视图更改为SwitchCase 1.

表单验证工作正常，但是当我添加函数siguiente()时，我收到错误Form submission canceled because the form is not connected我做错了什么？

以下是示例：https://stackblitz.com/edit/angular-y4hqgw

Answer 1

您正在以错误的方式关闭表单标记，您需要打开和关闭所有步骤（如

）的表单

<div class="form-row">
  <div class="col"></div>
  <div class="col"></div>
</div>
<br />

<div [ngSwitch]="variable">
  <form (ngSubmit)="guardar(forma)" #forma="ngForm">
  <div *ngSwitchCase="'0'">Paso1

      <div class="form-group row ">
        <label class="col-2 col-form-label">Nombre</label>
        <div class="col-8">

          <input class="form-control"
                 type="text"
                 placeholder="Nombre"
                 name="Nombre"
                 [(ngModel)]="usuario.nombre"
                 minlenght="5"
                 required
                 #nombre="ngModel"><!--La variable local hace referencia al form control-->

        </div>
      </div>

      <button type="submit" class="btn btn-primary" (click)="siguiente()" [disabled]="!forma.valid">Siguiente</button>





  </div>
  <div *ngSwitchCase="'1'">Paso2<button type="submit" class="btn btn-primary" (click)="anterior()">Atras</button>
        <button type="submit" class="btn btn-primary" (click)="siguiente()">Siguiente</button></div>
  <div *ngSwitchCase="'2'">Paso3<button type="submit" class="btn btn-primary" (click)="anterior()">Atras</button>
        <button type="submit" class="btn btn-primary" (click)="siguiente()">Siguiente</button></div>
  <div *ngSwitchCase="'3'">Paso4<button type="submit" class="btn btn-primary" (click)="anterior()">Atras</button>
        <button type="submit" class="btn btn-primary" (click)="siguiente()">Siguiente</button></div>
  <div *ngSwitchCase="'4'">Paso5<button type="submit" class="btn btn-primary" (click)="anterior()">Atras</button>
        </div>
</form>
</div>

它显示错误，因为所有ngSwitchCase都不在表单标记内。并输入=＆＃34;提交＆＃34;通常用于表单提交。

ngSwitch on Angular Form验证

1 个答案: