Question

我有一个包含三个输入字段的组件，所有这些字段都是必填字段。我已在所有输入元素中添加了必需项，将它们全部放在表单标记下。单击按钮我必须发送这些字段的值一些web服务中的字段。如果任何字段为空但是它不起作用，我在该按钮上添加了一个禁用的类。即使所有字段都是空的，我也可以导航到下一页，所以它不是一个问题特定的输入字段，这意味着我的表单验证本身无法正常工作

cardDetail.component html

    <app-header></app-header>
<div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
<h3 style="font-family: Lucida Console serif;color: rgba(0, 0, 0, 0.71);font-size: 17px;text-align: left;">Enter Payment Details</h3>
<p id ="plain">We require your bank details to transfer the <br>claim amount to you.<br>
<form (ngSubmit)="onSubmit()" #carddetailform ="ngForm" id="ngForm">


  <div class="form-group">
  <input type="text" class="form-control" id="name" name="name" [(ngModel)] = "name"  placeholder="Full Name" required>
  <div [hidden]="name.valid || name.pristine"
     class="alert alert-danger">
  Name is required
</div><br><br>
  </div>
  <div class="form-group">
  <input type="text" class="form-control" id="ifsc" name="ifsc" (keyup)=  "onlatestinputchange($event)" [(ngModel)] = ifsc   [value]="ifsc || '' " placeholder="IFSC Code" required>
  <div [hidden]="ifsc.valid || ifsc.pristine"
     class="alert alert-danger">
  IFSC Code is required
</div>

  </div>
  <p id ="message">Don't know your IFSC Code? That's okay, <a (click)="openDialog()">Find out here!</a><br><br>
<div class="form-group">
<input type="text" id="keyword" class="form-control" name="bankname" [(ngModel)]= "query"  (keyup)="filter()" placeholder="BANK"  />
<div [hidden]="ifsc.valid || ifsc.pristine"
     class="alert alert-danger">
  Bank Name is required
</div>
</div>

  <!--</div>-->


<div class="filter-select" *ngIf="filteredList.length > 0">
  <ul  *ngFor="let item of filteredList" class="filter-select-list"><li class="artist-name">

    <a (click)="select(item)">{{item}}</a>
  </li>

</ul>
</div>

 <button type="submit"   [disabled]="!carddetailform.form.valid" form="ngForm" id ="button"class="form-control"  routerLink="/endOfSurvey">Send Bank Details</button> 
<!-- <button type="submit" id ="button" class="form-control" routerLink="/endOfSurvey" >Send Bank Details</button> -->
  </form>
</div></div></div>

在我的component.ts文件中添加了2行

submitted = false;
onSubmit() { this.submitted = true; }

我做错了什么？

Answer 1

你好像有空格＆＃39;在多个地方的模板上的属性值分配之间。修复那些。例如，

#carddetailform = "ngForm" ===> #carddetailform="ngForm"

name ="ifsc"               ===> name="ifsc"

同样在许多地方，先清理它们。

然后更改button，

< <button type="submit"   [disabled]="!carddetailform.form.valid" form="ngForm" id ="button"class="form-control" routerLink="/endOfSurvey" >Send Bank Details</button>

要，

<button type="submit"   [disabled]="!carddetailform.valid" id="button" class="form-control" [routerLink]="carddetailform.valid ? '/endOfSurvey' : null" >Send Bank Details</button>

看看它是否有效。

在进行所有验证后，角度2形成不起作用

1 个答案: