angular2模板驱动的表单验证问题

Posted

技术标签:

【中文标题】angular2模板驱动的表单验证问题【英文标题】:angular2 template driven form validation issue 【发布时间】:2018-03-01 03:32:05 【问题描述】:

我对 angular2 模板驱动的表单验证有问题,以下是我的表单的代码。

  <h1>page_title</h1>
  <div *ngIf="success_flag" class="alert alert-success">
        success_message.message
  </div>
  <form  #add_book_form="ngForm"  (ngSubmit)="add_book(add_book_form)" novalidate>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Book Name</label>
                                            <input name="book_name" id="book_name" [(ngModel)]="book_name" class="form-control" required>
                                            <div *ngIf="book_name.invalid && (book_name.dirty || book_name.touched)" class="alert alert-danger">
                                                              <div *ngIf="book_name.errors.required">
                                                              Book Name is required.
                                                              </div>


                                                              </div>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Book Description</label>
                                            <textarea name="book_description" [(ngModel)]="book_description" class="form-control" required></textarea>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Book Published Date</label>
                                            <input name="book_published_date" [(ngModel)]="book_published_date" class="form-control"  required>
                                      </div>
                                </div>
              </div>      
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Cover Image</label>
                                            <input name="book_cover_image" [(ngModel)]="book_cover_image" class="form-control" type="file" (change)="getFiles($event,'cover_image')" required>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>PDF Copy</label>
                                            <input name="book_pdf_copy" [(ngModel)]="book_pdf_copy" class="form-control" type="file" (change)="getFiles($event,'pdf_copy')" required>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>PDF Sample</label>
                                            <input name="book_pdf_sample" [(ngModel)]="book_pdf_sample" class="form-control" type="file" (change)="getFiles($event,'pdf_sample')" required>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Price</label>
                                            <input name="book_price" [(ngModel)]="book_price" class="form-control" type="number" required>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix  text-center">
                                            <button [disabled]="add_book_form.invalid" class="btn btn-success">Save Book</button>
                                      </div>
                                </div>
              </div>      
        </form>

目前提交按钮被禁用。当我尝试填写书名字段时,它必须被启用,但它仍然无法正常工作,我不知道究竟存在哪里问题。错误消息也没有显示。

请帮忙。 谢谢

【问题讨论】:

这可能不相关但是,你为什么在这里使用 novalidate? 但你的条件是只有在整个表单有效的情况下才启用按钮。 【参考方案1】:

@DBQ 是对的。

而不是使用:

<button [disabled]="add_book_form.invalid" class="btn btn-success">Save Book</button>

你应该使用:

<button [disabled]="add_book_form.controls['book_name'].invalid" class="btn btn-success">Save Book</button>

【讨论】:

以上是关于angular2模板驱动的表单验证问题的主要内容,如果未能解决你的问题,请参考以下文章

验证模板表单中的复选框列表(不是反应式表单)Angular 2

模板驱动表单中的表单验证问题

带有预填充数据的 Angular2 表单验证

异步验证器不适用于 Angular 中的模板驱动表单

如何在模板驱动的表单中为 ngModelGroup 添加自定义验证

Angular2嵌套模板驱动表单